垂直對齊和實心分隔線

Question

我有一個兩行的面板。每行有2列。我需要的是垂直對齊左邊的文本（第1列）與右邊選擇的高度（第2列）。

這是我有：

我也沒有這樣的劃分各行的默認行。我買了一個模板，可我有一個覆蓋在一些css文件，但我什麼也看不到

爲面板的代碼是：

<div class="wrapper_indent"> 
@foreach($dias as $dia) 
    <div class="panel panel-default"> 
     <div class="form-control header-card"> 
      {{$dia['nombre'] }} 
     </div> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <span class="body-card">Primer turno</span> 
      </div> 
      <div class="col-sm-6"> 
       <select name="example" class="form-control selecthora"> 
        @foreach($dia['horarios'] as $horario) 
         <option {{ ($dia['valorInicio']===$horario)?'selected="selected"':''}} value="{{$dia['valorInicio']}}">{{$horario}}</option> 
        @endforeach 
       </select> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <span class="body-card">Último turno</span> 
      </div> 
      <div class="col-sm-6"> 
       <select name="example" class="form-control selecthora"> 
        @foreach($dia['horarios'] as $horario) 
         <option {{ ($dia['valorFin']===$horario)?'selected="selected"':''}} value="{{$dia['valorFin']}}">{{$horario}}</option> 
        @endforeach 
       </select> 
      </div> 
     </div> 
    </div> 
@endforeach 

</div><!-- End wrapper_indent --> 

我的自定義CSS爲試圖解決的問題是以下內容：

.body-card{ 
    font-size: 12px; 
    display: inline-block; 
    vertical-align: middle; 
    font-weight: bold; 
} 

感謝您的幫助！

Answer 1

.panel .row { 
    display: flex; 
    align-items: center; //for vertical-alignment 
    justify-content: center; //for horizontal-alignment 
}