アキラのＩＴメモ：CSSによる垂直方向のセンタリング

水平方向のセンタリングはtext-align:center;でできるのですが、垂直方法のセンタリングはどうするのだろうと以前から気になっていました。ピクセル単位でマージンを入れたり、四苦八苦していたのですが、どうやら1行しかない文字列の場合はline-heigtを使用することで垂直方向のセンタリングが出来るようです。すなわち、

.middle {
  border: 3px double #606060;
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding: 5px;
  margin: 5px;
}

<p class="middle">センタリング！</p>

この場合、以下のように表示されます。

センタリング！

ちなみに、vertical-align:middle;はimgやspanといったインライン要素とテーブルのセルにしか使用できないので、pやdivなどのセンタリングには使えません。

コメントを投稿