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

Question

simple question. Have tried different ways to figure out, but all failed. All I need is to align text vertically center in each columns in one row. Here is the code:

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

The text shows at the top of each column, I dont want to use margin-top for each text. Any other way that I can align text vertically ?

Thanks!

Answer 1

You can create it using line-height as follows,and put this class in to every <div> s

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

Codepen example: 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>