Html 如何使占用2行的跨距与仅占用1行的相邻列垂直居中？

这是我的问题的图片。我希望

Live

span以2个日期选择器为中心

这是你的电话号码

以及守则：

    <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>

居住

您可以使用。分配

显示：flex和
对齐项目：居中到您的
行

CSS

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


注意*您可能希望为该
.row
div指定一个唯一的类，并为其分配属性。
我建议使用Flexbox，但浏览器支持对其不是很好。您可以在
span

span.add-padding{
填充：24px0；
显示：内联块；
}

Live

显然，要调整填充量，以适合其他款式。