css - 使用 Bootstrap 3 在输入上方居中标签

Question

我试图将我的标签置于我的 datetimepicker 输入之上，但 text-align:center 似乎没有削减它。

http://jsfiddle.net/aesh3ufk/4/

有谁知道如何将标签置于我的输入之上？即使 !important 也不起作用...

<div class="row">
        <div class="col-xs-12">
        <h4><strong>ITEMS CHECKED IN</strong></h4>
          <div class='col-md-6'>
            <label for="From">From</label>
              <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' id="From" class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
          </div>
          <div class='col-md-6'>
            <label for="To">To</label>
              <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' id="To" class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
          </div>
        </div>
       </div>

Answer 1

这其实很容易解决。只需添加 text-center给你的col-md-6 <div>小号:

<div class="row">
    <div class="col-xs-12">
        <h4 class="CAlign"><strong>ITEMS CHECKED IN</strong></h4>
        <!-- Right Here -->
        <div class='col-md-6 text-center'>
            <label for="From">From</label>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' id="From" class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <!-- And Here -->
        <div class='col-md-6 text-center'>
            <label for="To">To</label>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' id="To" class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle Example