テキストの垂直位置を指定する

テキストの垂直位置を指定する表示例

要素が表示される行(ボックス)の中でテキストの垂直位置を指定する方法です。テーブルなどのテキストの配置で便利ですね。

値の指定方法

テキストの垂直位置を指定する

baseline
親要素の行(ボックス)のベースラインにそろえます。
top
親要素の行(ボックス)の上端にそろえます。
middle
親要素の行(ボックス)の中心にそろえます。
bottom
親要素の行(ボックス)の下端にそろえます。
sub
下付き文字にします。
super
上付き文字にします。

HTML/XHTML

<p>これが<span>標準</span>の位置</p>
<p>これが<span class="text1">baseline</span>の位置</p>
<p>これが<span class="text2">top</span>の位置</p>
<p>これが<span class="text3">middle</span>の位置</p>
<p>これが<span class="text4">bottom</span>の位置</p>
<p>これが<span class="text5">sub</span>の位置</p>
<p>これが<span class="text6">super</span>の位置</p>

CSS

<style type="text/css">
<!--
p {
font-size: 50px;
margin: 10px;
border: 1px solid #000;
}
span { font-size: 15px; }
.text1 { vertical-align: baseline; }
.text2 { vertical-align: top; }
.text3 { vertical-align: middle; }
.text4 { vertical-align: bottom; }
.text5 { vertical-align: sub; }
.text6 { vertical-align: super; }
-->
</style>

テキストの垂直位置を指定する表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録