HOME > スタイルシート講座 > 縦・横方向の配置を設定する

縦・横方向の配置を設定する

スタイルシートで横方向の配置はtext-alginで、縦方向の配置はvertical-alignで指定します。

横方向の配置(text-algin)

text-alginでは、left(左寄せ)、center(中央揃え)、right(左寄せ)が設定できます。
何も指定しない場合は、left(左寄せ)になります。

HTMLファイル

<table border=1>
<tr width=100% height=60px>
<td>指定なし</td>
<td style="text-align:left;">左寄せ(left)</td>
<td style="text-align:center;">中央揃え(center)</td>
<td style="text-align:right;">右寄せ(right)</td>
</tr>
</table>

結果

指定なし

左寄せ(left)

中央揃え(center)

右寄せ(right)

縦方向の配置(vertical-algin)

vertical-alginでは、上寄せ(top)、中央揃え(middle)、下寄せ(bottom)が設定できます。
何も指定しない場合は、上寄せ(top)になります。

HTMLファイル

<table border=1>
<tr width=100% height=60px>
<td>指定なし</td>
<td style="vertical-align:top;">上寄せ(top)</td>
<td style="vertical-align:middle;">中央揃え(middle)</td>
<td style="vertical-align:bottom;">下寄せ(bottom)</td>
</tr>
</table>

結果

指定なし

上寄せ(top)

中央揃え(middle)

下寄せ(bottom)

vertical-alignは<p>や<div>などのインライン要素にそのままでは効きません。
親要素にはdisplay:table、子要素にはdisplay:table-cellを指定すると使用できます。

まとめ

横方向の配置はtext-alignを使用する。
縦方向の配置はvertical-alignを使用する。
vertical-alignはインライン要素には使用できないため、親要素にdisplay:table、子要素にdisplay:table-cellを使う。

スタイルシート講座

初心者講座

ホームページ作成講座

HTML講座

スタイルシート講座

スポンサードリンク

スタイルシート辞典

テキスト
フォント
背景
ボックス
配置
リスト
テーブル
ユーザインタフェース
その他