使用Bootstrap垂直对齐文本

Question

在此处尝试解决方案： 与Bootstrap 3垂直对齐，在此处： vertical-align：与Bootstrap 2中间对齐不起作用。

这是页面：http: //yonicks.com/falican/exemple.htm

码：

<div class="container">
    <div class="row gray_back">
         <div class="col-md-6 content_area  vcenter ">

             <div class="col-md-2"></div>

             <div class="col-md-10 vcenter">
                 <h1 >text here need to be in the middle vertically</h1>
                 <h1 > also this</h1>
             </div>


             <div class="the_p_area">
                 <div class="col-md-2"> </div>

                  <div class="col-md-10">
                      also this also this also this also this also this also this also this also this

                  </div>

             </div>

         </div>


         <div class="col-md-6">
             <img src="img/fff.png" class="img-responsive" alt="Responsive image">
                        <br>
         </div>

    </div>

</div>

我正在使用最新版本的Bootstrap。

如何使文本垂直对齐？

Answer 1

你很近。

.row > .col-md-6 {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

Answer 2

您可以使用！ 行高。 垂直对齐属性非常具体

例如：

.yourclas{
 line-height: 2;
}