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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: