Question

我正在扔这个厨房水槽，但我没有看到如何居中它。

我猜想class =“navbar-form navbar-left”与它有关，但删除它或将其更改为navbar-right什么也没做。

HTML：

<div class="clearfix" id="problemcontainer">
<form class="myform" method="GET" action="servlet" class="navbar-form navbar-left">
    <div class="clearfix">
    <div id="dateFieldandCalendar">
        <div class="input-group date">
            <input id="datepicker" name="pickedDate" type="text" class="form-control" placeholder="mm/dd/yyyy"/>
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="datebtn">
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </div>
    </div>
    </div>
    <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button> 
    <button type="reset" class="btn btn-warning"><i class="glyphicon glyphicon-remove"></i> Reset</button>
    <input id="month" name="monthHTML" value="" type="hidden"/>
    <input id="day" name="dayHTML" value="" type="hidden"/>
    <input id="year" name="yearHTML" value="" type="hidden"/>
    <input id="formID" name="formIDHTML" value="CaStateMSJID" type="hidden"/>
</form>
</div>

CSS：

.problemcontainer {
    text-align: center;
    overflow: collapse;
}

.myform {
    margin-top: 10px;
    text-align: center;
    overflow: collapse;
}

.input-group.date {
    text-align: center;
    width: 150px;
    overflow: collapse;
}

.dateFieldandCalendar {
    overflow: collapse;

    text-align: center; 
}

.input-group-btn {
    text-align: center;
}

.form-control {
    text-align: center;
}

.input-group {
    text-align: center;
}

.datepicker {
    text-align: center;
}

http://jsfiddle.net/H8LNA/

Answer 1

鉴于您要在元素上设置宽度，只需使用margin:0 auto将其居中。

UPDATED EXAMPLE HERE

.input-group.date {
    margin:0 auto;
    width: 150px;
}

text-align:center无效的原因是因为纯block级元素不支持该属性，在本例中为div。

对于替代方法，您可以创建元素inline-block并将text-align:center添加到父元素。 Bootstrap有一个类，只需将text-center添加到元素的类列表中。

尽管尝试了text-align，overflow和clearfix，但我无法将此输入框置于中心位置

1 个答案: