「なぜか少しズレる…」を解消！CSSの`vertical-align`とベースラインの不思議な世界
Webサイトを作っていて、「画像とテキストを横に並べたのに、なぜか微妙に位置が揃わない…」「`vertical-align: middle`と書いたのに、全然真ん中に来ない！」とイライラした経験はありませんか？
実はこれ、あなたが悪いわけではありません。CSSの「垂直方向の配置」は、Web制作の中でもトップクラスに「直感に反する」厄介な場所だからです。でも大丈夫。この仕組みさえ分かってしまえば、もうレイアウトで迷うことはなくなります。
今日は、フォントの裏側に隠された「ベースライン」という秘密のガイドラインと、`vertical-align`の本当の姿を紐解いていきましょう。
—
そもそも「文字」はどこに座っているのか？
皆さんが普段使っているWordやノートを思い出してみてください。文字を書くとき、私たちは必ず「横一直線のガイドライン」の上に乗せて文字を書きますよね。
CSSの世界でも全く同じです。インライン要素（`span`や`a`、`img`など）は、「ベースライン」という透明な床の上に立っています。
- ベースライン (Baseline): 文字が座っている床。
- ミッドライン (Midline): 小文字の「x」などの高さの頂点。
- トップライン (Topline): アセンダ（hやlなど）の頂点。
私たちが「垂直方向に揃えたい」と思ったとき、ブラウザは「要素のどのラインを、相手のどのラインに合わせるか？」を必死に計算しているんです。
—
`vertical-align`の「落とし穴」
多くの初学者がつまずくのは、`vertical-align: middle`の挙動です。実はこれ、「親要素のど真ん中」に配置してくれる魔法の呪文ではありません。
正確には「自分の中心線と、親要素の『x』の高さの中間線を合わせる」という動作なんです。
これが、画像とテキストを並べた時に「なんとなくズレている」と感じる正体です。画像には「x」のような基準がないため、ブラウザは独自の判断で配置を決定してしまい、デザイナー泣かせのズレが生まれてしまうのです。
—
実践！スッキリ揃えるためのコード例
では、実際にどうすれば思い通りに配置できるのか、シンプルで実用的なコードを見てみましょう。
テキストが綺麗に揃います！
つまずいた時のチェックリスト
もし、どうしても位置が揃わないときは、この3つを疑ってみてください。
1. `line-height`は設定されていますか？
- インライン要素の高さは、親の`line-height`の影響を強く受けます。ここが曖昧だと基準線が定まりません。
2. `display: inline-block`を忘れていませんか？
- `img`はもともとインラインブロックですが、もし他の要素を並べるなら、`display: inline-block`にすることで`vertical-align`が効くようになります。
3. 「親のフォントサイズ」に引きずられていませんか？
- 文字サイズが変わるとベースラインの高さも変わります。親要素に`font-size: 0`を指定して隙間を消すという裏技も、現場ではよく使われます。
—
最後に：完璧を求めすぎないのがコツ
正直に言いますね。`vertical-align`だけで完全にピクセル単位の完璧な配置を目指すと、ブラウザごとの微妙なフォント解釈の違いに振り回されて疲れてしまいます。
「なんだか揃わないな」と思ったら、`flexbox`（`display: flex; align-items: center;`）という現代の強力な武器を使うことを検討してください。`vertical-align`は「テキストと一緒にアイコンを添える」といった、インラインの中での微調整に使うのが、一番スマートで無理のない付き合い方です。
Web制作は、こうした小さな「なぜ？」を一つずつ解き明かしていくパズルのようなもの。焦らず、楽しみながら進んでいきましょう。あなたの書いたコードが、誰かの画面で美しく表示されることを応援しています！
コメント