垂直对齐和实心分隔线

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
}