ゼロからはじめるホームページ作成 
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を使う。


スタイルシート講座

初心者講座

スポンサードリンク

スタイルシート辞典

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



Copyright© ゼロからはじめるホームページ作成講座 All Rights Reserved.  サイトマップ