Question

如何将文本框置于范围（#inner_span）的中心？我尝试过使用margin-left：auto; margin-right：auto;但它似乎不起作用。

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

<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>

Answer 1

span #inner_span div实际应该是form，因为您无法在内联元素中嵌套块级user_input_span，但这仅仅是为了信息，它不是对这个问题很重要;）

实际上是输入所需的范围margin: 0 auto; - 跨度是内联元素，因此它们不接受宽度，这就是为什么它们不会使用inline-blocks居中的原因 - 你可以将元素转换为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; }元素
将文本对齐方式重置为实际输入元素中的左侧（如果这是您的偏好，则将其保持居中）

{{1}}

Answer 2

如果父级有一些宽度，

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;
}

编辑：

好的，这是你的工作代码

.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;
}

在Fiddle

上更新

如何使用CSS将此文本框居中？

2 个答案: