ホーム > CSS > CSSプロパティ > vertical-align

■vertical-align

　テキストの水平位置を指定することが出来ます。異なるフォントサイズについて合わせたい時に有効です。
　テキスト水平位置を設定するには、「vertical-align」プロパティにより行います。

vertical-align
テキストの水平位置を指定することが出来ます。異なるフォントサイズについて合わせたい時に有効です。
設定値	説明
mm、cm、in、pt、pc、em、ex、px	サイズ指定
%	%指定
baseline	親要素のベースラインで揃えます。
middle	中心に揃えます。
sub	下付文字に揃えます。
super	上付文字に揃えます。
text-top	テキストの上端に揃えます。
text-bottom	テキストの下端に揃えます。
top	上詰めに揃えます。
bottom	下詰めに揃えます。
inherit	継承

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<TITLE>vertical-align</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>

設定は「サイズ指定」です。変化しているでしょうか？ 
設定は「%指定」です。変化しているでしょうか？ 
設定は「baseline」です。変化しているでしょうか？ 
設定は「middle」です。変化しているでしょうか？ 
設定は「sub」です。変化しているでしょうか？ 
設定は「super」です。変化しているでしょうか？ 
設定は「text-top」です。変化しているでしょうか？ 
設定は「text-bottom」です。変化しているでしょうか？ 
設定は「top」です。変化しているでしょうか？ 
設定は「bottom」です。変化しているでしょうか？

</BODY>
</HTML>

■実行例

「vertical-align:15pt」となっています。

設定は「サイズ指定」です。

「vertical-align:0%」となっています。

設定は「%指定」です。

「vertical-align:baseline」となっています。

設定は「baseline」です。

「vertical-align:middle」となっています。

設定は「middle」です。

「vertical-align:sub」となっています。

設定は「sub」です。

「vertical-align:super」となっています。

設定は「super」です。

「vertical-align:text-top」となっています。

設定は「text-top」です。

「vertical-align:text-bottom」となっています。

設定は「text-bottom」です。

「vertical-align:top」となっています。

設定は「top」です。

「vertical-align:bottom」となっています。

設定は「bottom」です。

■対応ブラウザ

vertical-align
設定値	IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6	O7
mm、cm、in、pt、pc、em、ex、px	×	×	×	×	●	×	×	●	●	●	●
%	×	×	×	×	●	×	●	●	●	●	●
baseline	×	●	●	●	●	×	●	●	●	●	●
middle	×	●	●	●	●	×	●	●	●	●	×
sub	×	●	●	●	●	×	×	●	●	●	●
super	×	●	●	●	●	×	×	●	●	●	●
text-top	×	●	●	●	●	×	×	●	●	●	●
text-bottom	×	●	●	●	●	×	×	●	●	●	●
top	×	●	●	●	●	×	×	●	●	●	●
bottom	×	●	●	●	●	×	●	●	●	●	●
inherit	×	×	×	×	×	×	×	●	●	●	×

[ホーム] [CSS] [CSSプロパティ] [↑ページ最上部へ戻る]

インターネット上であなたのパソコン教室を開きませんか？
自宅でパソコン教室を簡単に開くことが出来ます。そして低リスクで効率よく稼げる仕事をさがしている。そんな方にはオススメです。