cman.jp > WEBページ作成TOP > CSSリファレンス > 「インライン要素の位置揃え」
WEBページ作成
広告
vertical-align 「縦(垂直)方向の文字位置」
「vertical-align」は文字の縦(垂直)方向の位置を指定します。
インライン要素、テーブルセル要素に有効で、DIVなどのブロック要素にはそのままでは適用できません。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | インライン要素 テーブルセル要素 | する |
広告
vertical-alignの指定方法
「vertical-align」はインライン要素とテーブルセル要素に有効です。ブロック要素に「vertical-align」を指定しても有効とはなりません。
対象となる要素（タグ）は次のリンク先の一覧で「display初期値」が「inline」「table-cell」となっています。
タグ毎のinline,table-cell一覧
DIVなどのブロック要素でも文字の縦位置を「vertical-align」で指定したい場合は下記のサンプルをご確認ください。
| 構文 | |||||
|---|---|---|---|---|---|
|
vertical-align : baseline | top | middle | bottom | text-top | text-bottom | super | sub | % | 値; |
|||||
| プロパティ/設定値 | 意味 | ｲﾝﾗｲﾝ 要素 | ﾃｰﾌﾞﾙ 要素 | ||
| vertical-align : baseline; | 親要素のベースライン合わせ | ○ | × | ||
| vertical-align : top; | 上端揃え | ○ | ○ | ||
| vertical-align : middle; | 中央揃え | ○ | ○ | ||
| vertical-align : bottom; | 下端揃え | ○ | ○ | ||
| vertical-align : text-top; | 親要素のフォント上端揃え | ○ | × | ||
| vertical-align : text-bottom; | 親要素のフォント下端揃え | ○ | × | ||
| vertical-align : super; | 親要素の上付き文字 | ○ | × | ||
| vertical-align : sub; | 親要素の下付き文字 | ○ | × | ||
| vertical-align : 200%; | 親要素のベースラインから line-heightに対する割合で指定 正：上方向、負：下方向 |
○ | × | ||
| vertical-align : 2em; | 親要素のベースラインから line-heightに対する値で指定 参照：CSSの長さ、大きさの単位 正：上方向、負：下方向 |
○ | × | ||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
vertical-align のサンプル
<style type="text/css">
.sample1 td { line-height:normal; border:1px solid #666; }
.sample1 tr td:nth-of-type(1) { height:60px; font-size:60px; }
.s1 { font-size:36px; color:#333; background-color:#ddd;}
.s2 { font-size:12px; color:blue;}
.bl { vertical-align : baseline; }
.tp { vertical-align : top; }
.md { vertical-align : middle; }
.bt { vertical-align : bottom; }
.tt { vertical-align : text-top; }
.tb { vertical-align : text-bottom; }
.sp { vertical-align : super; }
.sb { vertical-align : sub; }
.pr { vertical-align : 300%; }
.vl { vertical-align : -1.5em; }
</style>
<!-- html -->
<table class="sample1" style="width:100%;max-width:500px">
<tr><th>インライン要素</th><th>テーブルセル</th></tr>
<tr>
<td>X<span class="s1">Y<span class="s2 bl">[baseline]</span></span></td>
<td class="s2 bl">[baseline]</td>
</tr>
<tr>
<td>X;<span class="s1">Y<span class="s2 tp">[top]</span></span></td>
<td class="s2 tp">[top]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 md">[middle]</span></span></td>
<td class="s2 md">[middle]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 bt">[bottom]</span></span></td>
<td class="s2 bt">[bottom]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 tt">[text-top]</span></span></td>
<td class="s2 tt">[text-top]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 tb">[text-bottom]</span></span></td>
<td class="s2 tb">[text-bottom]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 sp">[super]</span></span></td>
<td class="s2 sp">[super]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 sb">[sub]</span></span></td>
<td class="s2 sb">[sub]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 pr">[300%]</span></span></td>
<td class="s2 pr">[300%]</td>
</tr>
<tr>
<td>X<span class="s1">Y<span class="s2 vl">[-1.5em]</span></span></td>
<td class="s2 vl">[-1.5em]</td>
</tr>
</table>
| インライン要素 | テーブルセル |
|---|---|
| XY[baseline] | [baseline] |
| XY[top] | [top] |
| XY[middle] | [middle] |
| XY[bottom] | [bottom] |
| XY[text-top] | [text-top] |
| XY[text-bottom] | [text-bottom] |
| XY[super] | [super] |
| XY[sub] | [sub] |
| XY[300%] | [300%] |
| XY[-1.5em] | [-1.5em] |
DIVなどのブロック要素で縦(垂直)位置を有効とする のサンプル
DIVなどのブロック要素で縦位置調整に「vertical-align」を使用する場合は「display: table-cell」とする必要があります。
ただし、DIVがセルと同じ動きとなるため、横並びとなりますので注意が必要です。
<style type="text/css">
.tp { vertical-align : top; }
.md { vertical-align : middle; }
.bt { vertical-align : bottom; }
.tblcell{
display : table-cell;
text-align : center;
width : 150px;
height : 100px;
border : 1px solid #666
}
<!-- html -->
<div id="sampleDiv1" class="tblcell tp">[top]<br>上詰め</div>
<div id="sampleDiv2" class="tblcell md">[middle]<br>中央</div>
<div id="sampleDiv3" class="tblcell bt">[bottom]<br>下詰め</div>[top]
上詰め
上詰め
[middle]
中央
中央
[bottom]
下詰め
下詰め
上記サンプルのDIVのDISPLAYを変更して確認することができます。
| 関連するCSS(STYLE) | |
|---|---|
| bottom | 基点の下辺からの距離 |
| caption-side | テーブルのキャプションの表示位置 |
| clear | 回り込みの解除 |
| display | ボックスの種類 |
| float | 配置と回り込み |
| overflow | オーバーフローしたコンテンツの表示 |
| overflow-x | 横方向にオーバーしたコンテンツの表示 |
| overflow-y | 縦方向にオーバーしたコンテンツの表示 |
| position | 配置方法 |
| z-index | ボックスの重なり順 |
| line-break | 禁則処理のルール(改行位置指定) |
| line-height | 行の高さ |
| left | 基点の左辺からの距離 |
| right | 基点の右辺からの距離 |
| top | 基点の上辺からの距離 |
広告