【vertical-align】HTMLでテキストを上下中央寄せする方法
今回は、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プロパティで上下中央寄せさせています。