中央揃えにする


CSSで中央揃えにしたい、といった場合、
中央にしたい要素にmargin:0 auto;と指定します。

.sample1 {
margin:0 auto;
border:solid 1px #333;
width:400px;
}
中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。

(※IE6以下で中央揃えにする場合)

IEの6以下のバージョンで中央揃えにしたい場合、
margin:0 auto;が効かないので、text-align:center;を利用します。

.sample2 {
width:400px;
margin:0 auto;
text-align:center;
border:solid 1px #333;
}

.sample2 p {
text-align:left;
}

中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。中央に配置します。

text-align:center;を使うと、テキストなどの内容も中央揃えになってしまうので、
中のコンテンツにtext-align:left;を適用させます。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る