ホーム >>> HTML整理ノート

vertical-align テキストの垂直配置

値はキーワードで設定
　baseline ･･･親要素のベースラインに合わせて整形（初期値）
　text-top ･･･親要素のフォントの上辺に合わす。
　text-bottom ･･･親要素のフォントの下辺に合わす。
　middile ･･･中心線を、親要素のテキストの小文字(x）の真ん中に当たる位置に
　super ･･･上付きにする。
　sub ･･･下付きにする。
　top ･･･その要素でもっとも上にあるものに上端を合わせる。
　bottom ･･･その要素でもっとも下にあるものに下端を合わせる。

Sample

Samplevertical-align:baselineサンプルを表示

Samplevertical-align:topサンプルを表示

Samplevertical-align:bottomサンプルを表示

Samplevertical-align:text-topサンプルを表示

Samplevertical-align:text-bottomサンプルを表示

Samplevertical-align:superサンプルを表示

Samplevertical-align:subサンプルを表示

vertical-align:baseline

vertical-align:top

vertical-align:bottom

vertical-align:text-top

vertical-align:text-bottom

vertical-align:super

vertical-align:sub

テキストにはあまり利用価値はない。画像にテキストを配置する場合には使えそう。

Sample Source......................................................................>>>

<style type="text/css">
<!--
  p.test {font-size:36px;}
  span { color:red;font-size:12px;}
-->
</style>

<p class="test">Sample<span style="vertical-align:baseline">vertical-align:baseline</span>
　　　　サンプル<span style="vertical-align:baseline">を表示</span></p> 
<p class="test">Sample<span style="vertical-align:top">vertical-align:top</span>
　　　　サンプル<span style="vertical-align:top">を表示</span></p>
<p class="test">Sample<span style="vertical-align:bottom">vertical-align:bottom</span>
　　　　サンプル<span style="vertical-align:bottom">を表示</span></p>
<p class="test">Sample<span style="vertical-align:text-top">vertical-align:text-top</span>
　　　　サンプル<span style="vertical-align:text-top">を表示</span></p>
<p class="test">Sample<span style="vertical-align:text-bottom">vertical-align:text-bottom
　　　　</span>サンプル<span style="vertical-align:text-bottom">を表示</span></p>
<p class="test">Sample<span style="vertical-align:super">vertical-align:super</span>
　　　　サンプル<span style="vertical-align:super">を表示</span></p>
<p class="test">Sample<span style="vertical-align:sub">vertical-align:sub</span>
　　　　サンプル<span style="vertical-align:sub">を表示</span></p>
<p><img src="../../images/irasuto/keitai.gif"  style="vertical-align:baseline">
　　　　　　vertical-align:baseline</p>
<p><img src="../../images/irasuto/keitai.gif"" style="vertical-align:top">
　　　　　　vertical-align:top</p>
<p><img src="../../images/irasuto/keitai.gif" style="vertical-align:bottom">
　　　　　　vertical-align:bottom</p>
<p><img src="../../images/irasuto/keitai.gif" style="vertical-align:text-top">
　　　　　　vertical-align:text-top</p>
<p><img src="../../images/irasuto/keitai.gif" style="vertical-align:text-bottom">
　　　　　　vertical-align:text-bottom</p>
<p><img src="../../images/irasuto/keitai.gif" style="vertical-align:super">
　　　　　　vertical-align:super</p>
<p><img src="../../images/irasuto/keitai.gif" style="vertical-align:sub">
　　　　　　vertical-align:sub</p>