概要へ移動

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

インライン要素
top middle bottom baseline super sub text-top text-bottom
テーブルのセル
top middle bottom
super baseline sub
text-top 無指定 text-bottom
ブロック要素（上揃え）
3em
5em
7em
ブロック要素（中央揃え）
3em
5em
7em
ブロック要素（下揃え）
3em
5em
7em

vertical-alignの概要

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

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

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

なお、middleをcenterと間違えやすいので注意。( 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>要素を使うと、ほとんどのブラウザで上／下付き文字として表示されるので、 superやsubで表現する必要はない。

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と同じようになる。

ブロック要素

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

例。親子関係（親１＋子３）のある<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;