Html 在div中居中对齐文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24092875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center aligning textbox in div
提问by Hymanhammer
I am trying to align my text and textbox to center of the div. My main div is centered because of margin:0 auto. But I applied this to textbox and its not working.
我正在尝试将我的文本和文本框与 div 的中心对齐。我的主要 div 居中，因为margin:0 auto. 但是我将它应用于文本框并且它不起作用。
<div class="CommentBox">
Some text :
<input type="text" />
</div>
CSS
CSS
.CommentBox {
width:400px;
height:50px;
background-color: #A12A1E;
color:White;
margin:0 auto;
}
input[type="text"] {
margin:10px auto;
}
I have tried everything. As you can see the above code, I have added margin:0 autobut still my code is not working. The textbox is just not center aligning.
我已经尝试了一切。如您所见，我已经添加了上面的代码，margin:0 auto但我的代码仍然无法正常工作。文本框只是不居中对齐。
Can someone help me here. I am confused why this is not working as everywhere I have checked margin:0 autois suggested for center aligning.
有人可以在这里帮助我。我很困惑为什么这不起作用，因为我检查过的所有地方都margin:0 auto建议进行中心对齐。
采纳答案by Satwik Nadkarny
You need to add a div inside the div named CommentBox. So your html can be as such:
您需要在名为 CommentBox 的 div 中添加一个 div。所以你的 html 可以是这样的：
<div class="CommentBox">
<div>Some text:
<input type="text" />
</div>
</div>
and you can add a CSS class to act upon this div as such:
你可以添加一个 CSS 类来处理这个 div：
.CommentBox > div {
margin:0 auto;
width:250px;
}
You can see this here: http://jsfiddle.net/L77Bf/
你可以在这里看到这个：http: //jsfiddle.net/L77Bf/
Hope this helps!!!
希望这可以帮助！！！
回答by Sanjeev
Best Solution: For horizontally center aligning
最佳解决方案：用于水平居中对齐
No need to add another div, in your existing css rule .CommentBox {} , just add text-align:center;and it will work.
无需在现有 css 规则 .CommentBox {} 中添加另一个 div ，只需添加即可text-align:center;。
JS Fiddle demo: http://jsfiddle.net/LTatz/
JS 小提琴演示：http: //jsfiddle.net/LTatz/
If you need vertical center alignment also then you will have to do some extra work.
如果您还需要垂直居中对齐，那么您将不得不做一些额外的工作。
回答by Homberto
Try 'display:block;' This makes it behave like a block element (such as
尝试“显示：块；” 这使得它表现得像一个块元素（例如
).
）。
回答by Christian Gollhardt
This Should do the Trick (Note the text-align and display properties):
这应该可以解决问题（注意 text-align 和 display 属性）：
.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;
}
And this is your updated Fiddle:
这是你更新的小提琴：
回答by Veera
In case you don't want to specify a fixed width for inner content, you can try this approach.
如果您不想为内部内容指定固定宽度，您可以尝试这种方法。
<div class='comment'>
<span>
<label>some text</label>
<input type="text" />
</span>
</div>
and the CSS would be:
和 CSS 将是：
.comment{
margin:0 auto;
width:400px;
text-align:center;
}
.comment span{
display:inline-block;
}
