DD_log / HTML,CSS,Javascript,Wordpressの解説や雑感サイト

CSSでよく使用するプロパティと値の組み合わせ「要素の中央揃え」についての解説です。

要素の中央揃え

Webサイト全体を中央にそろえたい場合など、要素を中央にそろえる際にはmarginプロパティを使用します。

例えばサイト全体を囲むdiv (id=container)を中央にそろえたい場合以下の記述をします。

div#container{

width:800px;

margin: 0 auto;}

まずは幅の指定をします。幅の指定をしないとうまく効かない場合があります。

次に赤字部分の記述marginプロパティに2つの値を指定しています。

一つ目の値0は上下に対する余白の指定、二つ目の値は左右に対する余白の指定となります。

上下は0ということで余白を空けないという指示です。

ポイントとなるのは左右のautoです。

autoとすることで親要素中で中央揃えにすることができます。

ブロックレベル要素は 幅の指定をしないと親要素と同じ幅になるため、中央揃えという表示にはなりません。

 【CSSとは (3)】 よく使用するCSSプロパティ一覧はこちらからご覧ください