html - 使用 Bootstrap 垂直对齐文本

Question

尝试了这里的解决方案: vertical-align with Bootstrap 3和这里: vertical-align: middle with 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;
}