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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:12:43  来源:igfitidea点击:

How can I center this textbox using CSS?

htmlcss

提问by ben

jsFiddle

js小提琴

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为宽度,然后应该这样做它,或者更简单地使用带有文本对齐的内联元素

  1. center text in the formelement
  2. reset the text-alignment to left in the actual input element (or leave it centered if that's your preference)
  1. form元素中的居中文本
  2. 将实际输入元素中的文本对齐方式重置为左对齐(或者如果这是您的偏好,则将其居中)


.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

小提琴上更新