vertical-align

インライン要素またはテーブルのセル要素に指定することで、その親要素または行に対する垂直位置を変更できます。

  • インライン要素に指定 … 親要素に対する垂直位置
  • テーブルのセル要素 (td要素) に指定 … 行 (tr要素) に対する垂直位置

インライン要素への指定

値 揃える位置 基準となる位置 備考
baseline 要素の基準線 (baseline) 親要素のbaseline 既定値
super 要素の基準線 (baseline) 親要素のsuperscript-baseline sup要素に類似
sub 要素の基準線 (baseline) 親要素のsubscript-baseline sub要素に類似
text-top      
text-bottom      
長さ      
割合      
middle 要素の中央 親要素の基準線に高さの半分を加えた位置  
top 要素と子孫要素の上端 行全体の上端  
bottom 要素と子孫要素の下端 行全体の下端   
<div>
    <span style="font-size: 1em">1em</span>
    <span style="vertical-align: top">top</span>
    <span style="vertical-align: middle">middle</span>
    <span style="vertical-align: bottom">bottom</span>
</div>
1em top middle bottom 
<div>
    <span style="font-size: 3em">3em</span>
    <span style="vertical-align: top">top</span>
    <span style="vertical-align: middle">middle</span>
    <span style="vertical-align: bottom">bottom</span>
</div>
3em top middle bottom
サンプルコード 適用例 
<img src="sample.png" />
A
(未指定) 		A 
<img style="vertical-align: top" src="x.png" />
A
A 
<img style="vertical-align: middle" src="x.png" />
A
A

大きさの異なるテキストの、ボックス位置をそろえる

bottomを指定することで、font-sizeの異なるテキストのボックス位置をそろえられます。ただしこの方法では、テキストの位置がそろわなくなります。

<span style="font-size:1em; vertical-align: bottom">ABC</span>
<span style="font-size:2em; vertical-align: bottom">ABC</span>
<span style="font-size:3em; vertical-align: bottom">ABC</span>
未指定 (baseline) ABC ABC ABC
bottom ABC ABC ABC

inline-blockの子要素への指定

親要素がdisplay属性でinline-blockとされていると、その子要素には上下が反転して適用されることがあります。

<div style="display: inline-block">
    <span style="vertical-align: top">top</span>
</div>
未指定
middle
top
bottom

テーブルのセル要素への指定

これはtd要素のvalign属性を、CSSで実現するものです。

<td style="vertical-align: middle">
値  
baseline (sub、super、text-top、text-bottom、長さ、割合)  
top  
middle  
bottom  
baseline top middle bottom
A A A A
tdのvalign属性による指定
baseline top middle bottom
A A A A

参考

関連ページ

HTMLの情報サイトから、まとめて検索