twitter-bootstrap - Angular UI Timepicker 垂直对齐

Question

我正在使用来自 Angular UI - Bootstrap 的时间选择器控件，但我不知道如何将其垂直居中。它基本上是其他控件的 3 倍高，默认为 label/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

时间选择器实际上是一个表 其中包含 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>  

Try this on jsfiddle