html - % 高さの行の高さ

Question

div でテキストを垂直方向に中央揃えにしたい場合は、たとえば line-height を追加します。

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