我正在使用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>
解决方法
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>