CSSのボックス整列を完全ガイド！初心者でもわかるvertical-alignの使い方

1. vertical-alignとは？役割と仕組みを解説

1. vertical-alignとは？役割と仕組みを解説

CSSのvertical-align（バーティカルアライン）は、要素を「縦方向（垂直方向）」にどの位置でそろえるかを決めるためのプロパティです。Webデザインにおいて、画像とテキストが微妙に上下にずれてしまう現象を解消し、見た目のバランスを整える重要な役割を担っています。

このプロパティの最大の特徴は、「インライン要素」や「テーブルセル」に対して機能する点です。例えば、文章の中に小さなアイコンを入れた際、デフォルトでは文字の下側のライン（ベースライン）に合わせて配置されるため、アイコンが少し浮いて見えたり、沈んで見えたりすることがあります。これを「真ん中にそろえて！」と命令できるのがvertical-alignです。

未経験でもわかる！基本的な書き方サンプル

まずは、何も設定していない状態と、vertical-alignを使って位置を調整した状態を比較してみましょう。アイコン画像と文字の並び方に注目してください。

<style>
    .v-middle {
        /* 画像をテキストの垂直方向の中央にそろえる */
        vertical-align: middle;
    }
    .sample-box {
        background-color: #f8f9fa;
        padding: 15px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
    }
</style>

<div class="sample-box">
    <p>【設定なし】 <img src="/img/sample120-120.jpg" width="30"> 文字の基準線（下側）に合っています。</p>
    <hr>
    <p>【設定あり】 <img src="/img/sample120-120.jpg" width="30" class="v-middle"> きれいに中央でそろっています！</p>
</div>

このように、わずかな指定を追加するだけで、ユーザーにとって読みやすく、プロが作ったような洗練されたレイアウトに仕上げることができます。次の章では、具体的な設定値（middleやtopなど）について詳しく見ていきましょう。

2. vertical-alignの基本的な値

2. vertical-alignの基本的な値

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

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

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

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

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. 表のセル内での縦方向の整列

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. 数値を使った微調整

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>

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

6. vertical-alignが効かない場合

6. vertical-alignが効かない場合

vertical-alignはインライン要素に対してのみ効果があります。つまり、ブロック要素（divやpなど）にはそのままでは効きません。

もしブロック要素を縦方向にそろえたい場合は、テーブルレイアウトや後に学ぶフレックスボックスなど別の方法を使う必要があります。

7. 実用的な活用シーン

7. 実用的な活用シーン

vertical-alignの便利な活用例をいくつか挙げてみます。

• ボタンの中のアイコンとテキストをきれいに中央でそろえる
• 文章中のインライン画像のズレを直す
• 表のセルの文字を上下にそろえる
• 小さい文字や特殊記号の位置を微調整する

これらを知っておくだけで、Webページの見た目がぐっと整い、プロらしいデザインに近づきます。

まとめ

まとめ

今回の記事では、CSSの整列において非常に重要な役割を持つvertical-alignについて詳しく解説してきました。Webデザインにおいて、画像とテキストが微妙にズレていたり、表の中の文字が意図しない場所に配置されていたりすると、ユーザーに「未完成な印象」を与えてしまいます。このプロパティをマスターすることで、ピクセル単位での精密な調整が可能になり、Webサイトのクオリティを一段階引き上げることができます。

vertical-alignを使いこなすポイントの再確認

まず覚えておくべきは、このプロパティが適用されるのはインライン要素（inline）やインラインブロック要素（inline-block）、そしてテーブルセル（table-cell）に限られるという点です。初心者が陥りやすい罠として、divタグなどのブロック要素に直接指定して「動かない！」と悩むケースがありますが、その場合は表示モードを切り替えるか、別の手法を検討する必要があります。

実践的なコード例：画像とテキストの黄金比整列

実務で最も頻出する、画像とテキストを垂直方向の中央で完璧にそろえる実装例をもう一度確認しましょう。ここでは、よくある「ニュース一覧」のアイコン表示などを想定したコードを記述します。

<style>
.news-container {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}
.news-icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}
.news-text {
    font-size: 16px;
    color: #333;
    vertical-align: middle;
}
</style>

<div class="news-container">
    <img src="/img/sample150-100.jpg" class="news-icon" alt="アイコン">
    <span class="news-text">最新のニュース記事がこちらに表示されます。</span>
</div>

上記のコードでは、画像（.news-icon）とテキスト（.news-text）の両方に vertical-align: middle; を指定することで、それぞれの要素の高さが異なっても、共通の中心線で整列するようにしています。これにより、スマートフォンのような小さな画面で見ても崩れにくい、美しいレイアウトが実現できます。

複雑なレイアウトでの応用：inline-blockとの組み合わせ

さらに、複数のボックスを横に並べつつ、それぞれの高さが異なる場合に上端をそろえたいときは、top を活用します。これは商品カードの並列表示などに非常に便利です。

<style>
.card-wrapper {
    background-color: #eee;
    padding: 10px;
}
.product-card {
    display: inline-block;
    width: 120px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    vertical-align: top;
    margin: 5px;
}
.product-card img {
    width: 100%;
}
</style>

<div class="card-wrapper">
    <div class="product-card">
        <img src="/img/sample120-120.jpg">
        <p>短い説明</p>
    </div>
    <div class="product-card">
        <img src="/img/sample120-120.jpg">
        <p>こちらは少し長めの説明文が入るカードです。</p>
    </div>
</div>

このように、要素の高さがバラバラでも vertical-align: top; を使うことで、ガタつきを抑えた整列が可能になります。 Web制作の現場では、FlexboxやGrid Layoutといった強力なツールが登場していますが、インライン要素の微調整においては、今でも vertical-align が最も手軽で強力な武器となります。 「なぜか少し浮いて見える」「微妙に下にずれている」といった違和感を感じたときは、まずはこのプロパティを思い出してみてください。 基本をしっかり押さえることで、どんなデザイン指示にも柔軟に対応できるコーディングスキルが身につくはずです。