垂直對齊導致格式錯誤

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; 
}