行内やセル内の縦方向の揃え位置を指定する
vertical-align
{
vertical-align
vertical-alignプロパティは、行内やセル内の縦方向の揃え位置(ベースライン)を指定します。
初期値 | baseline |
---|---|
継承 | なし |
適用される要素 | インライン要素とテーブルセル要素 |
モジュール | CSS3 module: line |
値の指定方法
揃え位置
auto | ベースラインは、ブラウザーによって自動的に調整されます。 |
---|---|
use-script | 親要素のベースラインを参照して、自動的に調整されます。 |
baseline | 親要素のベースラインの位置になります。 |
sub | 親要素の上付き文字の位置になります。 |
super | 親要素の下付き文字の位置になります。 |
top | 親要素、または先頭行のセルの上端と揃います。 |
bottom | 親要素、または先頭行のセルの下端と揃います。 |
central | 行の上端と下端の中央の位置に要素が揃います。 |
middle | 半角英字の「x」の中央の高さに要素が揃います。 |
text-top | 親要素のフォントと要素の上端が揃います。 |
text-bottom | 親要素のフォントと要素の下端が揃います。 |
任意の数値+単位 | ベースラインから移動する距離を単位付きの数値で指定します。既定のベースラインを0として正の値なら上、負の値なら下に移動します。 |
%値 | %値を指定します。値は要素の行の高さに対する割合となります。 |
サンプルコード
td.tp{vertical-align: top;} td.md{vertical-align: middle;} td.bt{vertical-align: bottom;}