search
New サムネイル 分断するメディアとインターネットのユーザー:ライトノベル、キズナアイ、TikTokに思うこと New サムネイル Golangのchiを使ったrouterの例 New サムネイル Golangの文字列(代入、結合・連結、部分文字列、置換)

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

広告

広告

広告

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

Python入門

Python入門

化学入門

化学入門

漢字辞典

漢字辞典

整数辞典

漢字辞典

Lord Candy

Lord Candy