垂直整列とソリッド・ロー・デバイダ

Question

2列のパネルがあります。各行には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 
}