Question

我正在尝试将文本和文本框对齐到div的中心。我的主要div由于margin:0 auto而居中。但我将其应用于文本框并且无法正常工作。

<div class="CommentBox">
    Some text :
    <input type="text" />
</div>

CSS

.CommentBox {
    width:400px;
    height:50px;
    background-color: #A12A1E;
    color:White;
    margin:0 auto;
}


input[type="text"] {
    margin:10px auto;
}

http://jsfiddle.net/88pMc/

我已经尝试了一切。正如您可以看到上面的代码，我添加了margin:0 auto，但我的代码仍无效。文本框不是中心对齐。

有人可以帮助我吗？我很困惑，为什么这不起作用，我检查过margin:0 auto建议进行中心对齐。

Answer 1

您需要在名为CommentBox的div中添加div。所以你的HTML可以这样：

<div class="CommentBox">
    <div>Some text:
        <input type="text" />
    </div>
</div>

你可以添加一个CSS类来对这个div进行操作：

.CommentBox > div {
    margin:0 auto;
    width:250px;
}

您可以在此处看到：http://jsfiddle.net/L77Bf/

希望这有帮助!!!

Answer 2

最佳解决方案：用于水平居中对齐

无需在现有的css规则.CommentBox {}中添加其他div，只需添加text-align:center;即可。

JS小提琴演示：http://jsfiddle.net/LTatz/

如果您还需要垂直居中对齐，那么您将需要做一些额外的工作。

Answer 3

尝试显示：阻止;＆＃39;这使它的行为类似于块元素（例如

）。

Further Explanation

Answer 4

这应该做技巧（注意文本对齐和显示属性）：

.CommentBox {
    width:400px;
    height:50px;
    background-color: #A12A1E;
    color:White;
    margin:0 auto;
    text-align:center;
}

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

这是你更新的小提琴：

http://jsfiddle.net/88pMc/20/

Answer 5

如果您不想为内部内容指定固定宽度，可以尝试这种方法。

<div class='comment'>
  <span>
    <label>some text</label>
    <input type="text" />
  </span>
</div>

，CSS将是：

.comment{
  margin:0 auto;
  width:400px;
  text-align:center;
}
.comment span{
  display:inline-block;
}

居中对齐div中的文本框

5 个答案:

最佳解决方案：用于水平居中对齐