Question

我正在尝试将我的标签置于日期时间戳输入的上方，但text-align:center似乎没有削减它。

有谁知道如何将标签置于输入的中心？甚至！重要的不起作用......

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

即可

<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

Answer 2

标签的display样式为inline-block，您必须将其更改为block才能将文字与中心对齐

Answer 3

一个选项就是将.text-center Bootstrap class添加到父div中，如下所示：

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

http://jsfiddle.net/aesh3ufk/6/

使用Bootstrap 3在输入上方标记标签

3 个答案: