2017-02-10 98 views
0

我有一个两行的面板。每行有2列。我需要的是垂直对齐左边的文本(第1列)与右边选择的高度(第2列)。垂直对齐和实心分隔线

这是我有:

image

我也没有这样的划分各行的默认行。我买了一个模板,可我有一个覆盖在一些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; 
} 

感谢您的帮助!

+1

这是更好地张贴真正的HTML,而不是服务器模板 – vals

+0

这才是真正的HTML –

回答

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

尽管此代码可以回答这个问题,提供了关于如何和/或为什么它解决了这个问题将提高额外的上下文答案的长期价值。 –

+0

代码回答了问题。请告诉我解决问题。谢谢 –