vertical-align - 垂直方向の配置位置を指定する

ライター　福田和宏

2009.12.11

構文

vertical-align : 配置;

説明文

　「vertical-align」はブロック要素の内容について垂直方向の配置位置を指定する。例えば，上揃えや中央に配置するといった指定が行える。virtical-alignでは以下のような配置指定が行える。

配置	意味
top	上揃えで配置する
middle	中央揃えで配置する
bottom	下揃えで配置する
baseline	ベースラインに合わせて配置する
super	上付き文字として表示する
sub	下付き文字として表示する

　また，水平方向の配置には「text-align」で指定する。

使用例

● CSSの定義

img.cap { vertical-align : top;}
th { vertical-align : middle;}

● HTMLの例

<div><img src="fedora.jpg" class="cap">　Fedora 9のデスクトップ画
面</div>
<table border="1">
<thead>
<caption>表　主なLinuxディストリビューション</caption>
</thead>
<tbody>
<tr>
    <th>Fedora</th>
    <td>最新の技術を率先して採用しているディストリビューション。Red H
        at Enterprise Linuxの実験的なディストリビューションという一面も持
        っている。</td>
</tr>
<tr>
    <th>Debian GNU/Linux</th>
    <td>完全にフリーなディストリビューションとして開発が行われている。
        誰でも自由に利用することができる。</td>
</tr>
<tr>
    <th>Slackware</th>
    <td>現在開発が行われているディストリビューションの中では最も古くから
        開発が行われている。シンプルな作りになっているのが特徴です。</td>
</tr>
</tbody>
</table>

● 表示結果

Internet Explorerの表示例