выровнять текст центр вертикально в колонке 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> s

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

Codepen пример: 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>