垂直对齐导致格式错误

Question

我想垂直居中文本引导。我发现this soulution，但是当我在.vcenter类添加到我的代码，它与我的自举行的格式冲突。我想把这行分成3列，每列4个宽度。一个用于文本，两个用于图像。这就是我在我的.vcenter类添加到我的代码：

后我添加.vcenter

我的代码：

<div class="container"> 
    <section class="row start-day "> 
    <div class="col-sm-4 start-day-text vcenter"> 
     <h2>im a body of text that i cant get to vertically align</h2> 
    </div> 
    <div class="col-sm-4 phone "> 
     <%= image_tag 'hand.png', class: 'demo', alt: 'Brieff demo' %> 
    </div> 
    <div class="col-sm-4 hand "> 
     <%= image_tag 'hand2.png', class: 'demo', alt: 'Brieff demo' %> 
    </div> 
</section> 
</div> 

Answer 1

使用下面的HTML：

<div class="container"> 
    <section class="row body"> 
     <div class="col-sm-4 fullheight"> 
       im a body of text that i cant get to vertically align 
     </div> 
     <div class="col-sm-4 fullheight"> 
      <img src="tabletPic1_80_o.png" /> 
     </div> 
     <div class="col-sm-4 fullheight"> 
      <img src="tabletPic1_80_o.png" /> 
     </div> 
    </section> 
</div> 

应用下面的CSS：

.body 
{ 
    height:100%; 
    background-color: antiquewhite; 
    display: inline; 
} 

.fullheight 
{ 
    color:white; 
    background:red; 
    border: 1px solid; 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
}