Irohabook
CSS ブロック要素

CSSでdiv要素を中央に揃える(margin: 0 auto)

広告

parent クラスの中に child クラスがあり、child クラスを中央に揃えたいときは次のようにする。

.parent {
}
.child {
    margin: 0 auto;
    width: 960px;
}

子要素の margin に 0 auto を設定する。0 と auto は半角スペースを入れる。子要素の width は設定しなくてもいい。

ポイント

text-align を使わない。text-align を center にすると、子要素の子要素(孫要素)も中央揃えになり、そこに含まれる p タグなどもいっせいに中央に揃えられる。

打ち消しの css を書かないためにも、text-align は文字列の中央揃え以外ではなるべく使わない。

.page {
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
}

max-width をピクセル単位の数値、width を 100% に設定するとスマホ対応になる。

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会