行数の定まっていないテキストを上下左右でセンタリングする方法

2016/07/25 2017/12/28

行数の定まっていないテキストを上下左右でセンタリングする方法。

今回はdisplay:table-cellとvertical-align:middleを使用する方法に助けられた。
以下のような感じで書くとセンタリングされるらしい。

vertical-alignは縦方向での位置を制御するプロパティ。
display:table-cellで、thやtdと同じ性質で要素を表示できるようになるため、vertical-alignを使えるようになる。

<!-- HTML -->
<div class="text03">
　<p>サンプルテキスト<br/>
　サンプルテキスト<br/>
　サンプルテキスト<br/>
　</p>
</div>
 
/* CSS */
.text03 {
    display:table;
    width:400px;
    height:400px;
}
.text03 p {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    line-height:1.5em;
}