如何垂直居中占据2行的跨度，而相邻列只占1行？

Question

这是我的问题的图片。我希望Live范围以2个日期选择器为中心。

这是JSFiddle。

代码：

    <div class="row">
      <div class="col-xs-6"><span>Live</span></div>
      <div class="col-xs-6">
        <div class="row">
          <div class="col-xs-12">
            <p class="input-group">
              <input type="text" max-date="'2016-9-26'" class="form-control" uib-datepicker-popup="{{format}}" ng-model="start_dt" is-open="open['start_dt']" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="open('start_dt')"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <p class="input-group">
              <input type="text" max-date="'2016-9-26'" class="form-control" uib-datepicker-popup="{{format}}" ng-model="end_dt" is-open="open['end_dt']" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats">
              <span class="input-group-btn">
              <button type="button" class="btn btn-gray btn-default" ng-click="open('end_dt')"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
            </p>
          </div>  
        </div>
      </div>
    </div>

Answer 1

您可以使用flexbox执行此操作。将display: flex;和align-items: center;分配给您的.row。

<强> CSS

.row {
  display: flex;
  align-items: center;
}

<强> JSFiddle

注意* 您可能希望为.row div提供一个唯一的类，并为其指定属性。

Answer 2

Flexbox是我所建议的，但浏览器支持不是很好。您可以在span

中添加一些填充

span.add-padding { padding: 24px 0; display:inline-block; }

<span class="add-padding">Live</span>

https://jsfiddle.net/mikeilk/0dsbvhhu/