html - 如何将占据 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 指定一个唯一的类并为其分配属性。