CSSでよく使用するプロパティと値の組み合わせ「要素の中央揃え」についての解説です。
要素の中央揃え
Webサイト全体を中央にそろえたい場合など、要素を中央にそろえる際にはmarginプロパティを使用します。
例えばサイト全体を囲むdiv (id=container)を中央にそろえたい場合以下の記述をします。
div#container{
width:800px;
margin: 0 auto;}
まずは幅の指定をします。幅の指定をしないとうまく効かない場合があります。
次に赤字部分の記述marginプロパティに2つの値を指定しています。
一つ目の値0は上下に対する余白の指定、二つ目の値は左右に対する余白の指定となります。
上下は0ということで余白を空けないという指示です。
ポイントとなるのは左右のautoです。
autoとすることで親要素中で中央揃えにすることができます。
ブロックレベル要素は 幅の指定をしないと親要素と同じ幅になるため、中央揃えという表示にはなりません。
【CSSとは (3)】 よく使用するCSSプロパティ一覧はこちらからご覧ください