Place input box at the center of div

后端未结

关注

 5  1990

借酒劲吻你

I have a div, and I want the input box to be place at it\'s center. How can I do this?

相关标签:

5条回答

余生分开走

2020-12-08 10:14

Here's a rather unconventional way of doing it:

#inputcontainer
{
    display:table-cell; //display like a <td> to make the vertical-align work
    text-align:center; //centre the input horizontally
    vertical-align:middle; //centre the input vertically


    width:200px; //widen the div for demo purposes
    height:200px; //make the div taller for demo purposes
    background:green; //change the background of the div for demo purposes
}

It might not be the best way to do it, and margin won't work, but it does the job. If you need to use margin, then you could wrap the div that displays as a table cell in another 'normal' div.

JSFiddle: http://jsfiddle.net/qw4QW/

0 讨论(0)

一整个雨季

2020-12-08 10:18

The catch is that input elements are inline. We have to make it block (display:block) before positioning it to center : margin : 0 auto. Please see the code below :

<html>
<head>
    <style>
        div.wrapper {
            width: 300px;
            height:300px;
            border:1px solid black;
        }

        input[type="text"] {
             display: block;
             margin : 0 auto;
        }

    </style>
</head>
<body>

    <div class='wrapper'>
        <input type='text' name='ok' value='ok'>
    </div>    


</body>
</html>

But if you have a div which is positioned = absolute then we need to do the things little bit differently.Now see this!

  <html>
     <head>
    <style>
        div.wrapper {
            position:  absolute;
            top : 200px;
            left: 300px;
            width: 300px;
            height:300px;
            border:1px solid black;
        }

        input[type="text"] {
             position: relative;
             display: block;
             margin : 0 auto;
        }

    </style>
</head>
<body>

    <div class='wrapper'>
        <input type='text' name='ok' value='ok'>
    </div>  

</body>
</html>

Hoping this can be helpful.Thank you.

0 讨论(0)

挽巷

2020-12-08 10:18
```
#the_div input {
  margin: 0 auto;
}
```
I'm not sure if this works in good ol' IE6, so you might have to do this instead.
```
/* IE 6 (probably) */
#the_div {
  text-align: center;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

一向

2020-12-08 10:18

#input_box {
    margin: 0 auto;
    text-align: left;
}
#div {
    text-align: center;
}

<div id="div">
    <label for="input_box">Input: </label><input type="text" id="input_box" name="input_box" />
</div>

or you could do it using padding, but this is not that great of an idea.

0 讨论(0)

隐瞒了意图╮

2020-12-08 10:26

You can just use either of the following approaches:

.center-block {
  margin: auto;
  display: block;
}

<div>
  <input class="center-block">
</div>

.parent {
  display: grid;
  place-items: center;
}

<div class="parent">
  <input>
</div>

0 讨论(0)