|
 |
|
縦方向の位置関係を指定する
サンプルと機能
→ Sample：BODYタグやDIVタグなどの縦方向の位置関係を変更する
縦方向の位置関係を、BODYタグやDIVタグなどに指定します。
スタイルシート・サンプル
緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。
→ ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照）
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
.tp { vertical-align: top } /* 上に揃える */
.md { vertical-align: middle } /* 中心に揃える */
.bt { vertical-align: bottom } /* 下に揃える */
.bl { vertical-align: baseline } /* 親要素のベースラインに揃える */
.tt { vertical-align: text-top } /* 親要素のフォントの上に揃える */
.tb { vertical-align: text-bottom } /* 親要素のフォントの下に揃える */
.sp { vertical-align: super } /* 上付き文字の位置に揃える */
.sb { vertical-align: sub } /* 下付き文字の位置に揃える */
.px { vertical-align: 30px } /* ベースラインを0とした値の+- */
-->
</STYLE>
</HEAD>
<BODY>
<TABLE border="3">
<TR><TD>
top<IMG src="img/sbgi05.gif" class="tp">
</TD><TD>
middle<IMG src="img/sbgi05.gif" class="md">
</TD><TD>
bottom<IMG src="img/sbgi05.gif" class="bt">
</TD></TR>
<TR><TD>
baseline<IMG src="img/sbgi05.gif" class="bl">
</TD><TD>
text-top<IMG src="img/sbgi05.gif" class="tt">
</TD><TD>
text-bottom<IMG src="img/sbgi05.gif" class="tb">
</TD></TR>
<TR><TD>
super<IMG src="img/sbgi05.gif" class="sp">
</TD><TD>
sub<IMG src="img/sbgi05.gif" class="sb">
</TD><TD>
30px<IMG src="img/sbgi05.gif" class="px">
</TD></TR>
</TABLE>
<BR><BR>
</BODY>
</HTML> |
解説・注意点など
使用スタイル：vertical-align
指定可能な値：top, middle, bottom, baseline, text-top, text-bottom, super, sub, pxやptなどの単位付きの数値や%
以下のような値を指定することができます。
| top |
： |
上に揃える |
| middle |
： |
中心に揃える |
| bottom |
： |
下に揃える |
| baseline |
： |
親要素のベースラインに揃える |
| text-top |
： |
親要素のフォントの上に揃える |
| text-bottom |
： |
親要素のフォントの下に揃える |
| super |
： |
上付き文字の位置に揃える |
| sub |
： |
下付き文字の位置に揃える |
| 単位付き数値 |
： |
ベースラインを0とした値の+- |
| % |
： |
ベースラインを0とした行高さの割合 |
← スタイルシートに戻る
|
|
|
