先生と生徒の会話形式で理解しよう

生徒

「CSSで画像や文字の位置をそろえたいんですけど、なかなか思ったように整列できません。どうすればきれいにそろえられますか？」

先生

「ボックスを整列させるにはいくつかの方法があります。特にvertical-alignを使うと、縦方向の位置を簡単にそろえることができますよ。」

生徒

「vertical-alignって名前は聞いたことがありますが、具体的にどういう効果があるんですか？」

先生

「それでは、vertical-alignの基本から実際の例まで一緒に見ていきましょう！」

1. vertical-alignとは？

CSSのvertical-alignは、ボックスやテキストを縦方向にそろえるためのプロパティです。特にインライン要素（テキストや画像など横に並ぶ要素）を上下で整列させるときに使われます。

たとえば文章の中に小さなアイコンを入れたとき、位置がずれて見えることがあります。そのズレを調整して、アイコンと文字をきれいにそろえるのに便利です。

2. vertical-alignの基本的な値

よく使う指定には次のようなものがあります。

baseline：文字の基準線にそろえる（初期値）
middle：要素の中央にそろえる
top：行の上端にそろえる
bottom：行の下端にそろえる

これらを理解すると、テキストと画像を自然にそろえることができます。

3. テキストと画像を中央にそろえる例

まずは文章の中に画像を入れて、vertical-alignで中央にそろえてみましょう。


<style>
img.icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}
</style>

<p>この文章の中に <img src="https://via.placeholder.com/40" class="icon"> アイコンを入れます。</p>

ブラウザ表示

vertical-alignを指定しないと、アイコンの下が少しずれて見えることがありますが、middleを指定することで文字とアイコンが中央でそろいます。

4. 表のセル内での縦方向の整列

表（table）のセルの中でもvertical-alignはよく使われます。たとえばセルの上に寄せたい、中央に配置したい、といった場合です。


<style>
td {
    border: 1px solid #333;
    width: 150px;
    height: 100px;
}
td.top {
    vertical-align: top;
}
td.middle {
    vertical-align: middle;
}
td.bottom {
    vertical-align: bottom;
}
</style>

<table>
    <tr>
        <td class="top">上に寄せる</td>
        <td class="middle">中央に寄せる</td>
        <td class="bottom">下に寄せる</td>
    </tr>
</table>

ブラウザ表示

このように、vertical-alignは表のセルでも直感的に働きます。書類作成やデータ表をデザインするときに役立ちます。

5. 数値を使った微調整

vertical-alignでは、数値を指定して細かく調整することもできます。単位にはpxや%を使います。


<style>
span.up {
    vertical-align: 10px;
}
span.down {
    vertical-align: -10px;
}
</style>

<p>通常の文字 <span class="up">上にずらす</span> <span class="down">下にずらす</span></p>

ブラウザ表示

こうすることで、アイコンや小さな文字の位置を微調整して自然な見た目にできます。