html - 在 div 列 Bootstrap 中垂直对齐文本中心

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> 

文本显示在每一列的顶部，我不想为每一列使用 margin-top 文本。 我可以通过任何其他方式垂直对齐文本吗？

谢谢!

Answer 1

您可以使用 line-height 创建它如下，把这个类放到每个<div>

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

Codepen 示例:http://codepen.io/anon/pen/rejBbY