【vertical-align】HTMLでテキストを上下中央寄せする方法

PROGRAM

今回は、HTMLでテキストを上下中央寄せする方法について、vertical-alignプロパティとline-heightプロパティの場合に分け、簡単に解説していきます。

vertical-alignを使う

スタイルのvertical-alignプロパティをmiddleにすることでテキストを上下中央寄せすることができます。

ただし、vertical-alignプロパティは、その要素のdisplayプロパティがtable-cellもしくはinlineの場合のみ有効です。

<div style="height:200px;display:table-cell;vertical-align:middle;">テキスト</div>

上記のコードでは、div要素のdisplayプロパティをtable-cellにしたうえで、vertical-alignプロパティで上下中央寄せさせています。

line-heightを使う

スタイルのline-heightプロパティを指定することでもテキストの上下中央寄せが可能です。

テキストが一行であれば、line-heightプロパティの値をheightプロパティと同一の値にすると上下中央寄せされます。

<div style="height:200px;line-height:200px;">テキスト</div>

上記のコードでは、div要素のheightプロパティとline-heightプロパティを同一の値にして、上下中央寄せさせています。

flexを使う

スタイルのdisplayプロパティをflexにしても上下中央寄せが可能です。

その場合には、displayプロパティをflexにしたうえでalign-itemsプロパティをcenterにする必要があります。

<div style="height:200px;display:flex;align-items:center;">テキスト</div>

上記のコードでは、div要素のdisplayプロパティをflexに指定し、align-itemsプロパティで上下中央寄せさせています。