[CSS] ブロック要素の横位置を指定する
ブロック要素（p要素やdiv要素など）の横位置指定に関するサンプルです。
横位置を指定するスタイルにはtext-alignがありますが、ブロック要素には指定できないので以下のようにします。
ブロック要素の横表示位置を指定する
例）左寄せにする
|
1 2 3 4 5 |
p.sample{ width:300px; background:yellow; margin-right:auto; } |
|
1 2 3 |
<div> <p class="sample">あいうえお</p> </div> |
【結果】
あいうえお
デフォルト左寄せなので、「margin-right:auto;」を指定しなくてもＯＫです。
例）中央寄せにする
|
1 2 3 4 5 6 |
p.sample{ width:300px; background:yellow; margin-left:auto; margin-right:auto; } |
|
1 2 3 |
<div> <p class="sample">あいうえお</p> </div> |
【結果】
あいうえお
例）右寄せにする
|
1 2 3 4 5 |
p.sample{ width:300px; background:yellow; margin-left:auto; } |
|
1 2 3 |
<div> <p class="sample">あいうえお</p> </div> |
【結果】
あいうえお
備考
- ブロック要素で横位置を指定するには、上記のようにmarginに対してautoを使用します。
- ブロック要素とインライン要素については以下をご覧ください。
⇒[HTML] ブロック要素とインライン要素