CSSの「vertical-align」でハマる人へ。なぜ思った通りに動かないのか、その正体を紐解こう
Web制作を始めたばかりの頃、誰もが一度は「あれ？ `vertical-align: middle;` を指定したのに、全然真ん中に来ない！」と頭を抱えた経験があるのではないでしょうか。
実はこのプロパティ、CSSの中でも屈指の「クセモノ」なんです。公式ドキュメントを読むと難解な専門用語が並んでいますが、安心してください。今日は、このモヤモヤを身近な例え話でスッキリ解消しちゃいましょう！
まずはイメージ！「文字」は「行」という箱の中の住人
`vertical-align` を理解するための最大のコツは、「文字は、見えない『行ボックス』という背の高い箱の中に住んでいる」と想像することです。
想像してみてください。文字の大きさやフォントがバラバラな人たちが、一つの長い「行」という部屋に並んで座っている様子を。
- `baseline`（デフォルト）：みんなの「足の裏」を基準に揃える。
- `middle`：みんなの「おへそ（中央）」を基準に揃える。
- `top` / `bottom`：部屋の「天井」や「床」に頭や足をぶつける。
CSSの `vertical-align` は、この「行という部屋の中で、みんなの背の高さをどう揃えるか？」を決めるためのルールなんです。
なぜ「思った位置」にならないの？
多くの人が躓く理由はシンプルで、「比較対象がいないから」です。
`vertical-align` は、インライン要素（`span`や`img`など）同士が「隣り合っているとき」に初めて力を発揮します。一人ぼっちで「真ん中になれ！」と命令しても、基準となる隣の要素がいないので、どこが真ん中なのか分からないんです。
実践コード：文字とアイコンを綺麗に揃えてみよう
例えば、ボタンの中に「アイコン（img）」と「テキスト（span）」を並べる場面を想定してみましょう。これが一番よく使うパターンです。
このコードのポイント
1. 両方に指定するのがコツ：アイコンだけではなく、隣のテキストにも `vertical-align: middle;` をかけてあげてください。「二人で協力して中央に揃えよう！」と教えるイメージですね。
2. ベースラインの呪縛：指定しない場合、ブラウザは文字の「足元（baseline）」で揃えようとします。これだとアイコンが少し浮いて見えたりして、どうしてもバランスが悪くなるんです。
よく使う値の使い分けガイド
迷ったら、まずはこの3つだけ覚えておけば大丈夫です！
- `baseline`（初期値）：アルファベットの「a」や「e」の足元で揃えます。日本語だと少し浮いた感じに見えることがあります。
- `middle`：迷ったらこれ！ アイコンとテキストを並べる時は、ほぼこれ一択です。
- `top` / `bottom`：画像などの大きな素材と文字の「上端」や「下端」をピシッと揃えたい時に便利です。
最後に：完璧を求めすぎなくていいんです
実は、現代のWeb制作では `flexbox`（フレキシブルボックス）という強力なレイアウト手法が主流になりつつあり、`vertical-align` を使う機会は昔より減っています。
「`vertical-align` がどうしても上手くいかない！」という時は、無理にこれに固執せず、「あ、今は `display: flex;` で揃えたほうが楽かも？」と切り替えるのも、立派なスペシャリストの判断です。
まずは「インライン要素は、見えない部屋の中でみんなと一緒に並んでいるんだな」というイメージを持つだけで、あなたのコーディングはグッと安定します。焦らず、少しずつ楽しみながら進んでいきましょうね！
コメント