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

Question

我试图在 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>

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