vertical-align
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
vertical-align
は CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。
試してみましょう
vertical-align は、2 つの場面で使用することができます。
- その中の行ボックスの中で、インラインレベル要素のボックスの垂直方向の配置を決める場合。例えば、テキストの行の中で画像の垂直位置を決めるために使用することができます。
- 表のセルの内容の垂直方向の配置を決める場合。
vertical-align
はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、ブロックレベル要素の垂直方向の配置には使用できません。
構文
/* キーワード値 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* <length> 値 */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> 値 */
vertical-align: 20%;
/* グローバル値 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;
vertical-align
プロパティは、以下の値のうち 1 つで指定します。
インライン要素用の値
親要素との相対値
以下の値は、親要素に対する垂直方向の配置方法を表します。
baseline
-
要素のベースラインを親要素のベースラインに揃えます。一部の置換要素、例えば
<textarea>
などのベースラインは HTML 仕様で未定義です。このため、このキーワードの挙動はブラウザーにより異なるかもしれません。 sub
-
要素のベースラインを親要素の subscript-baseline に揃えます。
super
-
要素のベースラインを親要素の superscript-baseline に揃えます。
text-top
-
要素の上端を親要素のフォントの上端に揃えます。
text-bottom
-
要素の下端を親要素のフォントの下端に揃えます。
middle
-
要素の中央を親要素のベースラインに x-height の半分を加えた位置に揃えます。
<length>
-
要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
<percentage>
-
要素のベースラインを、親要素のベースラインから指定されたパーセント値分上に配置します。値は、
line-height
プロパティのパーセント値です。負の値も指定できます。
行との相対値
以下の値は、親要素ではなく、行全体に対する垂直方向の配置方法を表します。
ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。
表のセル用の値
公式定義
初期値 | baseline |
---|---|
適用対象 | インラインレベルおよびテーブルセル要素。 ::first-letter および::first-line にも適用されます。 |
継承 | なし |
パーセント値 | 要素自身の line-height に対する相対値 |
計算値 | パーセンテージか長さを指定すると絶対的な値、それ以外は指定されたキーワード |
アニメーションの種類 | length |
形式文法
vertical-align =
[ first | last ] ||
<'alignment-baseline'> ||
<'baseline-shift'>
<alignment-baseline> =
baseline |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
text-top
<baseline-shift> =
<length-percentage> |
sub |
super |
top |
center |
bottom
<length-percentage> =
<length> |
<percentage>
例
基本的な例
HTML
<div>
画像 <img src="frame_image.svg" alt="link" width="32" height="32" /> に既定の配置を設定しています。
</div>
<div>
画像 <img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> に text-top の配置を設定しています。
</div>
<div>
画像 <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> に text-bottom の配置を設定しています。
</div>
<div>
画像 <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" /> に middle の配置を設定しています。
</div>
CSS
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
img.middle {
vertical-align: middle;
}
結果
行ボックス内での垂直方向の配置
HTML
<p>
top: <img style="vertical-align: top" src="star.png" alt="star"/>
middle: <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom: <img style="vertical-align: bottom" src="star.png" alt="star"/>
super: <img style="vertical-align: super" src="star.png" alt="star"/>
sub: <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>
<p>
text-top: <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em: <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em: <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%: <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%: <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>
結果
表のセル内での垂直方向の配置
例えば、6 つのセルがある単一の行のある表があるとします。 この行は、既定値として vertical-align
を bottom
に設定します。
- 最初の 4 つのセルはそれぞれ自分自身で
vertical-align
の値を設定し、これらの値は行の値を上書きします。 - 5 番目のセルは
vertical-align
の値を設定しないので、行の値を継承します。
6 番目のセルは、効果を確認するためにセルの高さを十分に確保することを保証するためにのみ使用します。
HTML
<table>
<tr class="bottom">
<td class="baseline">baseline</td>
<td class="top">top</td>
<td class="middle">middle</td>
<td>bottom</td>
<td>Row's style</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
pretium felis eu sem mattis vulputate.
</td>
</tr>
</table>
CSS
table {
margin-left: auto;
margin-right: auto;
width: 80%;
}
table,
th,
td {
border: 1px solid black;
}
td {
padding: 0.5em;
font-family: monospace;
}
.bottom {
vertical-align: bottom;
}
.baseline {
vertical-align: baseline;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
結果
仕様書
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |
ブラウザーの互換性
BCD tables only load in the browser