このページで解説するコードの実行結果。

top middle bottom baseline super sub text-top text-bottom
top middle bottom
super baseline sub
text-top 無指定 text-bottom

vertical-alignの概要

インライン要素 or テーブルのセルの縦方向の整列を設定する。

(表) vertical-alignの設定値
設定値意味デフォルト
top行の上端に揃える
middle行の中央に揃える
bottom行の下端に揃える
baselineベースラインに合わせる
super上付き文字の位置
sub下付き文字の位置
text-top上辺を親要素の文字列の上辺に合わせる
text-bottom下辺を親要素の文字列の下辺に合わせる

いろいろあるが、top/middle/bottomを使うことが多い。

なお、middlecenterと間違えやすいので注意。( text-alignではcenterを使う )

vertical-align
縦方向に整列
top
middle
中央
bottom
text-align
横方向に整列
left
center
中央
right

インライン要素

CSS : 高さが高い「行」に対する位置
.top        {   vertical-align: top;            }
.middle     {   vertical-align: middle;         }
.bottom     {   vertical-align: bottom;         }
.baseline   {   vertical-align: baseline;       }
.super      {   vertical-align: super;          }
.sub        {   vertical-align: sub;            }
.text-top   {   vertical-align: text-top;       }
.text-bottom {  vertical-align: text-bottom;    }
span {
    border:     1px solid red;   /*  境界線  */
}
div {
    border:  solid  blue;   /*  境界線  */
    line-height:    6em;    /*  行の高さ */
    font-size:      larger; /*  文字の大きさ  */
}
HTML : 適用するHTML
<div>
    <span class="top        ">top        </span>
    <span class="middle     ">middle     </span>
    <span class="bottom     ">bottom     </span>
    <span class="baseline   ">baseline   </span>
    <span class="super      ">super      </span>
    <span class="sub        ">sub        </span>
    <span class="text-top   ">text-top   </span>
    <span class="text-bottom">text-bottom</span>
</div>
実行結果
top middle bottom baseline super sub text-top text-bottom

上/下付き文字

<sup>要素や<sub>要素を使うと、ほとんどのブラウザで上/下付き文字として表示されるので、 supersubで表現する必要はない。

HTML : sup要素とsub要素
<p>
    2<sup>3</sup> = 8
</p>
<p>
    H<sub>2</sub>O
</p>
実行結果

23 = 8

H2O

テーブルのセル

ベースとなるテーブルを表示する。

CSS : ベースとなるCSS
td {
    border: solid blue;
    width:  4em;
    height: 6em;
}
HTML : テーブル要素
<table>
    <tr>
        <td class="top"    >top</td>
        <td class="middle" >middle</td>
        <td class="bottom" >bottom</td>
    </tr>
    <tr>
        <td class="super"    >super</td>
        <td class="baseline" >baseline</td>
        <td class="sub"      >sub</td>
    </tr>
    <tr>
        <td class="text-top"    >text-top</td>
        <td>無指定</td>
        <td class="text-bottom" >text-bottom</td>
    </tr>
</table>
実行結果
top middle bottom
super baseline sub
text-top 無指定 text-bottom

これに、以下のCSSを適用する。

CSS : 追加するCSS
.top        { vertical-align: top;    }
.middle     { vertical-align: middle; }
.bottom     { vertical-align: bottom; }
.baseline   { vertical-align: baseline;    }
.super      { vertical-align: super; }
.sub        { vertical-align: sub; }
.text-top       { vertical-align: text-top;    }
.text-bottom    { vertical-align: text-bottom; }
実行結果
top middle bottom
super baseline sub
text-top 無指定 text-bottom

テーブルのセル内では、baseline/super/sub/text-top /text-bottom topと同じようになる。

ブロック要素

縦並びのブロック要素には使えないが、横並びのインライン・ブロック要素には使える。

例。親子関係(親1+子3)のある<div>要素(ブロック要素)があるとする。

CSS : ベースとなるCSS(以降、省略)
div {
    border:        4px solid blue; /*  境界線 */
    margin:        5px;            /*  外側の余白 */
    padding:       8px;            /*  内側の余白  */
}
.parent {
    border-color:  red;           /*  境界線の色 */
}
HTML : 適用するHTML
<div class="parent">
    <div class="child" style="height: 3em">3em</div>
    <div class="child" style="height: 5em">5em</div>
    <div class="child" style="height: 7em">7em</div>
</div>
実行結果
3em
5em
7em

まず、inline-blockにして横並びにする。

CSS : 横並びにする
.child {
    display: inline-block;  
}
実行結果
3em
5em
7em

それから上揃えにしたり、

CSS : 上揃え
.child {
    display: inline-block;
    vertical-align: top;
}
実行結果
3em
5em
7em

中央揃えにしたり、

CSS : 中央揃え
.child {
    display: inline-block;
    vertical-align: middle;
}
実行結果
3em
5em
7em

下揃えにしたりする。

CSS : 下揃え
.child {
    display: inline-block;  
    vertical-align: bottom;
}
実行結果
3em
5em
7em

Emmet : va

記述Visual Studio Code
vavertical-align: top;
vamvertical-align: middle;
vabvertical-align: bottom;
vablvertical-align: baseline;
vaspvertical-align: super;
vasvertical-align: sub;
vattvertical-align: text-top;
vatbvertical-align: text-bottom;
  • display(inline-block) : ブロック要素を横並びにする