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% に設定するとスマホ対応になる。

広告

広告

広告

技術

言語

高校理系

高校文系

中学

小学

エッセイ

姉妹サイト