Html 如何使用 CSS 居中此文本框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5776141/
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
How can I center this textbox using CSS?
提问by ben
How can I centre the textbox within the span (#inner_span)? I have tried using margin-left:auto;margin-right:auto; but it doesn't seem to work.
如何在跨度 ( #inner_span)内居中文本框？我试过使用 margin-left:auto;margin-right:auto; 但它似乎不起作用。
CSS
CSS
div.user_form {
background: #EEE;
padding:15px;
margin-bottom: 10px;
border: #CCC solid 1px;
-moz-border-radius: 15px;
}
.user_input_class {
text-align: center;
}
HTML
HTML
<div class="user_form">
<span class="user_form_inner_span" id="inner_span">
<form>
<span class="user_input_span">
<input type="text" name="user_input" size="70" class="user_input_class">
</span>
<input type="checkbox" value="Private" name="private"> Option
<center>
<input type="submit" value="Add" class="add_user_button"
</center>
</form>
</span>
</div>
采纳答案by clairesuzy
your spanwith #inner_spanshould actually be a div, as you cannot nest a block level forminside an inline element, however that's just for info, it doesn't matter to this problem ;)
您的spanwith#inner_span实际上应该是 a div，因为您不能form在内联元素中嵌套块级别，但这只是为了提供信息，与此问题无关；)
it's actually the span user_input_spanthat the input is in which you need to center - spans are inline elements so they will not accept a width, which is why they won't center using margin: 0 auto;- you could convert the elements to inline-blockswith a width which should then do it, or even simpler use the inline elements with text alignment
它实际上是user_input_span输入需要居中的跨度 - 跨度是内联元素，因此它们不会接受宽度，这就是为什么它们不会使用居中margin: 0 auto;- 您可以将元素转换inline-blocks为宽度，然后应该这样做它，或者更简单地使用带有文本对齐的内联元素
- center text in the
formelement - reset the text-alignment to left in the actual input element (or leave it centered if that's your preference)
form元素中的居中文本- 将实际输入元素中的文本对齐方式重置为左对齐（或者如果这是您的偏好，则将其居中）
.user_form {
background: #EEE;
padding:15px;
margin-bottom: 10px;
border: #CCC solid 1px;
-moz-border-radius: 15px;
}
.user_form form {
/* center all the inputs in a form */
text-align: center;
/* how to center the whole form*/
width: 600px;
margin: 0 auto;
background: #ffe;
}
.user_form span {
/* reset text-alignment in the inputs */
text-align: left;
}
回答by Naren Sisodiya
margin-auto will work if parent has some width so try to apply some width to user_input_span like;
如果父级有一些宽度，margin-auto 将起作用，因此尝试将一些宽度应用于 user_input_span 之类；
.user_input_span{
width: 100%; /* this can be as per your need or form width */
}
.user_input_class {
text-align: center;
margin-left: auto;
margin-right: auto;
}
Edit:
编辑：
ok, here is your working code
好的，这是你的工作代码
.user_input_span{
width: 300px; /* this can be as per your need or form width */
display:inline-block;
}
.user_input_class {
text-align: center;
margin:0 auto ;
width:80px;
display:block;
}
updated on Fiddle
在小提琴上更新
