html - Bootstrap中的垂直对齐会导致格式错误

我正在尝试在引导程序中垂直居中放置文本。我找到了this soulution，但是当我将.vcenter类添加到代码中时，它与Bootstrap行的格式冲突。我希望将行分为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>

最佳答案

使用以下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;
}