Angular UI Timepicker垂直对齐

Question

我正在使用Angular UI中的timepicker控件 - Bootstrap,我无法弄清楚如何垂直居中.它基本上是其他控件的3倍,默认情况下是标签/ etc.似乎与时间输入框上方的^对齐.

我想弄清楚如何垂直居中,或垂直收缩它,因此它与常规输入盒的大小相同.

我知道表单控件类会垂直对齐它,但添加它会产生时髦的东西.输入框呈现正确的尺寸,但时间戳仍然在输入顶部始终(垂直偏离中心)渲染.

或者,有人可以推荐一种直接的方式来使用Angular.js和Bootstrap来请求输入日期和时间吗？

我的标记如下:

<div class="panel-body container-fluid">
    <div class="well well-lg container-fluid form-horizontal">
        <div class="form-group">
            <label for="idStartDate" class="col-md-2 control-label">Received After</label>
            <p class="col-md-2 input-group">
                <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="startDate"
                       is-open="startDateOpened" max-date="endDate || today" datepicker-options="dateOptions"
                       placeholder="Received after" id="idStartDate"/>
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="openStartDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
        </div>
        <div class="form-group">
            <label for="idStartTime" class="col-md-2 control-label">Time</label>
            <div class="col-md-2">
                <timepicker id="idStartTime" ng-model="startTime" minute-step="15"></timepicker>
            </div>
        </div>
    </div>
</div>

的jsfiddle

Answer 1

timepicker实际上是一个包含 3 行的表。（请参考源码：timepicker.html）

这就是为什么它占据的高度是其他控件的 3 倍。一个简单但可能不是很优雅的解决方案是将其放在另一个表中。

<table style="vertical-align='middle'">
  <tr><td>Time </td>
  <td>
  <timepicker id="idStartTime" ng-model="startTime" minute-step="15"></timepicker>
  </td>
</tr></table>  

在 jsfiddle 上试试这个