html - % 高度的行高

Question

当我想在div中垂直居中文本时，例如添加行高；

<div class="text"> Text </div>

.text{
   height:50px;
   line-height:50px;
 }

但是如果height:5%，如何给line-height的值让div中的文字垂直居中呢？

Answer 1

如果你想在 div 中间居中文本，只需添加:

display:table-cell;
vertical-align:middle;

到你的 div，它会在中间垂直对齐。

CSS

<div class="text"> Text </div>

.text{
   height:50px;
   display:table-cell;
   vertical-align:middle;
 }

示例 http://jsfiddle.net/JaP22/