中央揃えにする
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;を適用させます。
