在 div 列引导程序中垂直对齐文本中心

Question

简单的问题。尝试了不同的方法来弄清楚，但都失败了。我所需要的只是在一行中的每一列中垂直居中对齐文本。这是代码：

<div class='row '>
                <div class='col-md-3 col-xs-6'><p class="text-center ">dfgfg</p></div>
                <div class='col-md-3 col-xs-6'><p class="text-center">dfgfg</p></div>
                <div class='col-md-3 col-xs-6'><p class="text-center">dfgfg</p></div>
                <div class='col-md-3 col-xs-6'><p class="text-center">dfgfg</p></div>
            </div> 

文本显示在每列的顶部，我不想对每列使用边距顶部发短信。还有其他方法可以垂直对齐文本吗？

谢谢！

Answer 1

你可以

使用line-height创建它，如下所示，并将这个类放入每个<div>

.yo{
  height: 80px;
  line-height: 80px;
}

代码笔示例：http://codepen.io/anon/pen/rejBbY

Answer 2

.holider-height{
  display:table;
  height:500px;
}
.holider-height p{
  display:table-cell;
  vertical-align:middle
}

<div class='row '>
                <div class='col-md-3 col-xs-6 holider-height'><p class="text-center ">dfgfg</p></div>
                <div class='col-md-3 col-xs-6 holider-height'><p class="text-center">dfgfg</p></div>
                <div class='col-md-3 col-xs-6 holider-height'><p class="text-center">dfgfg</p></div>
                <div class='col-md-3 col-xs-6 holider-height'><p class="text-center">dfgfg</p></div>
            </div>