インラインブロック要素内の任意のテキストにベースラインを揃える

インラインブロック要素のベースラインについて

CSS で display: inline-block を指定した要素はインラインブロック要素となり、要素全体はインライン要素として文章の途中に埋め込まれるように表示される一方で、要素の内部のレイアウトはブロック要素のように縦方向^[1]に積まれるようになります。このとき、このインラインブロック要素は、デフォルトでは内外のベースラインを揃えるようにして配置されます。

例えば、以下のようにすると、インラインブロックに設定されたパディングの量に関わらず、テキストの位置が揃います (インラインブロックの部分が分かりやすいように背景色を設定してあります)。

では、中身が複数行になっていたらどうでしょうか? その場合、最後の行のベースラインに揃えられます。したがって、HTML を以下のように変えると、「2 行目」の部分が外側のテキストと揃います。

しかし実は、display 値が inline-block 以外の要素の場合は、最後ではなく最初の行のベースラインに揃えられることになっています。そのため、例えば inline-flex を指定すると、最初の行である「インラインブロック」の部分が外側のテキストと揃えられます。

インラインブロック要素内の任意のテキストに揃える

このことを利用すると、インラインブロック要素内に積まれている好きな要素内のテキストを外側のテキストと揃えることができます (ここでも各要素が分かりやすいように背景色を設定してあります)。

まず、.pile に inline-block が指定されているので、この内部にある最後の要素のベースライン位置に外側のテキストが揃えられます。.pile の内部の最後の要素は .below-wrapper なので、これのベースライン位置に揃えられることになります。そして、.below-wrapper は inline-flex なので、この内部にある最初の要素のベースライン位置が外側と揃えられます。.below-wrapper の最初の要素は .center なので、結局 .center のベースラインが最も外側と揃えられることになるわけです。

応用例

上の方法は、.above, .below, .center の実際のサイズに関わらず常に .center のベースラインに揃えられるので、いろいろと応用が効くと思います。

こんな感じに、メインのテキストの上下に注釈的な説明を加えられるというのが一番の応用例でしょう。

うまく調整すれば、入れ子にしてもレイアウトが崩れない分数を書くこともできます。

余談

上で述べたように、ベースラインが最初の要素に合わせられるか最後の要素に合わせられるかは display 値が inline-block かどうかで決められるわけですが、現在仕様が策定中の CSS Inline Layout Module Level 3 では、vertical-align の値に first か last を指定することで、display の値に関わらず、最初の要素に合わせるか最後の要素に合わせるかを決められるようになるようです。これはまだ草案段階なので、現状 (2021 年 11 月) では使えません。

脚注

1. 横書きの場合の話です。正確には「ブロック軸 (block axis) 方向」と言うべきで、横書きなら縦方向で、縦書きなら横方向です。