PR

構文

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の表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目