ことの始まり
最近、フロントエンドを勉強し直しているのですが、インライン要素はline-heightで縦方向の中央揃えができる、という話を聞きました。
お手軽で便利ですね。
ところがこれ、画像と並べただけで割と簡単にこわれます。
理由が気になったので色々と調べてみたところ、
どうも高さが不揃いの要素が並ぶとうまく機能しないようです。
これは、インライン要素のbaselineという概念が関係しています。
baseline とは
端的に説明すると、文字列の下端を貫く線です。
アルファベットのgやyのようにはみ出す無作法者もいますが、基本的に文字はbaselineを基準に整列しています。
インライン要素が複数並ぶとき、一本のbaselineが用意され、それに沿って要素が配置されます。
これが重要です。
意外にも画像はブロック要素ではなくインライン要素であり、baselineがあります。
baselineは下端と一致しています。
これが画像と並んだときに、文字が中央揃えされない理由でした。
vertical-align というプロパティ
ところで、インライン要素にはvertical-alignというプロパティがありbaselineがデフォルト値になっていますが、text-top、text-bottom、middleなどを指定することも可能です。
試してみましょう。
これはなに？？？
この現象がこの記事を書こうと思ったきっかけでした。
更に調査してみましょう。
ブラウザが壊れてしまったかのような表示ですが、一つ一つ検証してひもといてみましょう。
text-top と text-bottom
MDN によると、text-topおよびtext-bottomは以下のような定義になっています。
- text-top
- 要素の上端を親要素のフォントの上端に揃えます。
- text-bottom
- 要素の下端を親要素のフォントの下端に揃えます。
順に見ていきましょう。
まず、line-height: 100pxを指定された文字があります。
これの横にtext-topを指定された文字を並べます。
要素の上端をフォントの上端に揃えるので、緑色の円で示したラインが接続されます。
さらにtext-bottomを指定された文字を並べます。
要素の下端をフォントの下端に揃えるので、緑色の円で示したラインが接続されます。
さあ、完成しました。これがline-heightを指定されたtext-topとtext-bottomの配置です。
top と bottom と middle
MDNには以下のようにあります。
- top
- 要素と子孫要素の上端を行全体の上端に揃えます。
- bottom
- 要素と子孫要素の下端を行全体の下端に揃えます。
- middle
- 要素の中央を親要素の baseline + x-height の半分 に揃えます。
一気に配置しましょう。こういうことです。
-
topは要素の上端を揃えるので、上の赤線を接続。 -
bottomは要素の下端を揃えるので下の赤線を接続。 -
middleはbaselineを基準に要素の中心を揃えるので緑線を接続。
（矢印部分がx-heightの半分にあたります）
これが完成形です。いかがでしょうか？
最後にもう一度、実際の配置を見てみましょう。
実際には、line-heightと行全体の上下端は別なのですが、通常はほぼ近似するため、今回は同一のものとして説明させていただきました。
（よく見ると、text-bottomとtopが少しずれて並んでいますよね）
蛇足
line-heightと行全体の上下端が別であると考えるきっかけとなったサンプルです。
-
line-heightが水色の領域 -
フォントの上下端は見た目通り文字の上下端 - そして、（おそらく）
行全体の上下端がtopとbottomの配置から推測できます。
line-heightを大きくしても、行全体の上下端が一緒に広がるわけではないということですね。
あれこれと表示をいじった末の推測ですので、間違いがあったら教えてください。