CSSのvertical-alignプロパティで、インライン要素またはテーブルのセル要素で垂直の位置を指定するサンプルです。
目次
仕様 | vertical-alignプロパティの仕様 |
インライン要素とは | |
ベースラインとは | |
サンプル | インライン要素で垂直の位置を指定する |
テーブルのセル要素で垂直の位置を指定する |
vertical-alignプロパティの仕様
vertical-align : 値 |
vertical-alignプロパティは、インライン要素またはテーブルのセル要素での垂直の位置を指定します。
値 | 説明 |
---|---|
baseline | 親要素のbaseline に揃えます。(初期値) |
top | 行全体の上端に揃えます。 |
middle | 親要素の中央に揃えます。 |
bottom | 行全体の下端に揃えます。 |
text-top | 親要素のフォントの上辺に揃えます。 |
text-bottom | 親要素のフォントの下辺に揃えます。 |
super | 上付き文字にします。 |
sub | 下付き文字にします。 |
数値+単位 | 正の値は位置を上げます。負の値は位置を下げます。 |
数値+% | line-heightプロパティに対する割合です。正の値は位置を上げます。負の値は位置を下げます。 |
値 | 説明 |
---|---|
baseline | baselineに揃えます。(初期値) |
top | 上に揃えます。 |
middle | 中央に揃えます。 |
bottom | 下に揃えます。 |
値を継承しない |
- ブロックレベル要素の縦方向の位置指定には使えません。
- 以下はMDNのvertical-alignプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align
インライン要素とは
インラインとは、英語でinlineです。
<p class="p1">テスト<span id="sp2">top</span></p>
上記のコードでは、<span id="sp2">から</span>がインライン要素です。<p class="p1">から</p>はブロック要素です。
以下は、MDNのインライン要素の一覧のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements#Elements
ベースラインとは
ベースラインは、アルファベット等の文字での基準となる線です。
(下限を揃えるが、pの場合は下に抜ける)
以下は、MDNのベースラインのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/baseline
vertical-alignのサンプルです。
インライン要素で垂直の位置を指定する
baseline、top、middle、bottomのサンプル
テスト baseline top middle bottom
<style>
#sp1 {
vertical-align: baseline;
}
#sp2 {
vertical-align: top;
}
#sp3 {
vertical-align: middle;
}
#sp4 {
vertical-align: bottom;
}
.p1 {
border: 1px solid black;
font-size: 16px;
width: 300px;
}
.p1 span {
font-size: 12px;
}
</style>
<p class="p1">
テスト
<span id="sp1">baseline</span>
<span id="sp2">top</span>
<span id="sp3">middle</span>
<span id="sp4">bottom</span>
</p>
text-top、text-bottomのサンプル
text-topは親要素のフォントの上辺、text-bottomは親要素のフォントの下辺に揃えます。
<style>
#sp5 {
vertical-align: text-top;
}
#sp6 {
vertical-align: text-bottom;
}
.p1 {
border: 1px solid black;
font-size: 16px;
width: 300px;
}
.p1 span {
font-size: 12px;
}
</style>
<p class="p1">
テスト
<span id="sp5">text-top</span>
<span id="sp6">text-bottom</span>
</p>
super、subのサンプル
superは上付き文字、subは下付き文字にします。
テスト super sub
<style>
#sp7 {
vertical-align: super;
}
#sp8 {
vertical-align: sub;
}
.p1 {
border: 1px solid black;
font-size: 16px;
width: 300px;
}
.p1 span {
font-size: 12px;
}
</style>
<p class="p1">
テスト
<span id="sp7">super</span>
<span id="sp8">sub</span>
</p>
数値を指定するサンプル
正の値は位置を上げます。負の値は位置を下げます。
テスト 10px -10px
テスト 10% -10%
<style>
#sp9 {
vertical-align: 10px;
}
#sp10 {
vertical-align: -10px;
}
#sp11 {
vertical-align: 10%;
}
#sp12 {
vertical-align: -10%;
}
.p1 {
border: 1px solid black;
font-size: 16px;
width: 300px;
}
.p1 span {
font-size: 12px;
}
</style>
<p class="p1">
テスト
<span id="sp9">10px</span>
<span id="sp10">-10px</span>
</p>
<p class="p1">
テスト
<span id="sp11">10%</span>
<span id="sp12">-10%</span>
</p>
テーブルのセル要素で垂直の位置を指定する
baseline、top、middle、bottomのサンプル
baseline | top | middle | bottom |
<style>
#td1 {
vertical-align: baseline;
}
#td2 {
vertical-align: top;
}
#td3 {
vertical-align: middle;
}
#td4 {
vertical-align: bottom;
}
#table1,td {
border: 1px solid #000;
width: 400px;
height: 100px;
}
</style>
<table id="table1">
<tr>
<td id="td1">baseline</td>
<td id="td2">top</td>
<td id="td3">middle</td>
<td id="td4">bottom</td>
</tr>
</table>
関連の記事
CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにするサンプル
CSS line-height 行の高さを指定するサンプル