Question

我有一个div，我希望输入框放在它的中心。我怎么能这样做？

Answer 1

问题是输入元素是内联的。在将它定位到中心之前我们必须阻止它（显示：块）：margin：0 auto。请参阅以下代码：

<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>

但如果你有一个定位=绝对的div，那么我们需要做的事情有点不同。现在看到这个！

  <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>

希望这会有所帮助。谢谢。

Answer 2

#the_div input {
  margin: 0 auto;
}

我不确定这是否适用于'IE6'，所以你可能不得不这样做。

/* IE 6 (probably) */
#the_div {
  text-align: center;
}

Answer 3

您可以在输入字段中使用以下CSS：

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

现在在html中，

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

Answer 4

#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>

或者你可以使用填充来做到这一点，但这不是一个好主意。

Answer 5

试试这个网站，它会向您展示如何将内容放在div和/或文本中。 Dorward

Answer 6

这是一种非常规的方式：

#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
}

它可能不是最好的方法，并且保证金不起作用，但它可以完成这项工作。如果你需要使用保证金，那么你可以将显示为表格单元格的div包装在另一个“普通”div中。

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

将输入框放在div的中心

6 个答案: