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 span
with #inner_span
should actually be a div
, as you cannot nest a block level form
inside an inline element, however that's just for info, it doesn't matter to this problem ;)
您的span
with#inner_span
实际上应该是 a div
,因为您不能form
在内联元素中嵌套块级别,但这只是为了提供信息,与此问题无关;)
it's actually the span user_input_span
that 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-blocks
with 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
form
element - 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
在小提琴上更新