【CSS】vertical-align - インライン要素の垂直方向位置
CSSのvertical-alignプロパティについてご紹介します。
vertical-align
vertical-alignはインライン要素やテキストの垂直方向位置のプロパティです。
基本構文
vertical-align: 値;値
一般的な値は次の通りです。
| 値 | 意味 |
|---|---|
| top | 要素の上端を揃えます。 |
| bottom | 要素の下端を揃えます。 |
| sub | 要素のベースラインを親要素の下付き文字のベースラインに揃えます。 |
| super | 要素のベースラインを親要素の上付き文字のベースラインに揃えます。 |
| text-top | 親要素の上端に揃えます。 |
| text-bottom | 親要素の下端に揃えます。 |
| middle | 親要素の中央に揃えます。 |
| 数値 | 要素のベースラインを親要素のベースラインに数値分上に揃えます。 |
サンプル
要素の上端揃え
次のサンプルはテキストを上端に揃えます。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: top;
}
</style>
<p>ABCDE<span>X</span></p>要素の下端揃え
次のサンプルはテキストを下端に揃えます。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: bottom;
}
</style>
<p>ABCDE<span>X</span></p>下付き文字
次のサンプルはテキストを下付き文字の位置に揃えます。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: sub;
}
</style>
<p>ABCDE<span>X</span></p>上付き文字
次のサンプルはテキストを上付き文字の位置に揃えます。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: super;
}
</style>
<p>ABCDE<span>X</span></p>親要素の上端揃え
次のサンプルはテキストを親要素の上端に揃えます。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: text-top;
}
</style>
<p>ABCDE<span>X</span></p>親要素の下端揃え
次のサンプルはテキストを親要素の下端に揃えます。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: text-bottom;
}
</style>
<p>ABCDE<span>X</span></p>親要素の中央揃え
次のサンプルはテキストを親要素の中央に揃えます。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: middle;
}
</style>
<p>ABCDE<span>X</span></p>垂直方向の数値指定
次のサンプルはテキストを親要素の中央から数値分下（マイナス数値）に表示します。
<style>
p {
font-size: 1.5em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
span {
font-size: 0.5em;
vertical-align: -1.0em;
}
</style>
<p>ABCDE<span>X</span></p>
