【Bootstrap】rowを中央寄せできない。

前提・実現したいこと

Bootstrapで、row(背景が黒の部分)を中央配置したいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>PAS-POL-旅のモノづくりブランド-</title>
7
8<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
9
10<link rel="stylesheet" type="text/css" href="stylesheet.css">
11
12<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
13
14<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anosnymous"></script>
15
16<link rel="preconnect" href="https://fonts.googleapis.com">
17<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
19</head>
20<body>
21<div class="container-fluid p-0 m-0">
22
23
24
25  <div class="row content2a m-0 p-0">
26    <div class="col-4 earth"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/01/wh_thumb2.png" alt=""><p>地球一周 365日 世界遺産絶景の旅</p></div>
27    <div class="col-4 kyoto"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/kyoto365_thumnail-1.png" alt=""><p>365日 京都 絶景の旅</p></div>
28    <div class="col-4 hokkaidoa"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/banner_thumb1.png" alt=""><p>365日 北海道 絶景日めくりカレンダー</p></div>
29  </div>
30
31  <div class="row content2b">
32    <div class="col-4 hokkaidob"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/08/thumb_gokkaido.png" alt=""><p>365日 北海道 絶景の旅
33    </p> </div>
34    <div class="col-4 music"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2019/05/thumb_fes.png" alt=""><p>The World Festival Guide -海外の音楽フェス完全ガイド-
35    </p></div>
36    <div class="col-4 die"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2018/11/banner_%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB21.png" alt=""><p>この世界で死ぬまでにしたいこと2000</p></div>
37</div>
38
39
40
41
42</div>
43<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
44<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
45<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
46<script type="text/javascript" src="script.js"></script>
47</body>
48</html>

CSS
1.container-fluid{
2    font-family: 'Montserrat', sans-serif;
3    width:100%;
4}
5
6
7.content2a,.content2b{
8    width:800px;
9    height:700px;
10    margin:0 auto;
11    background-color:black;
12}
13.content2a img, .content2b img{
14    object-fit: contain;
15    width:250px;
16    height:600px;
17}
18.content2a p, .content2b p{
19   
20    font-size:20px;
21    font-weight: 550;
22}

試したこと

対象のrowにmargin:0 auto;を指定しました。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML

↓↓↓↓↓

「ｍ-0」クラスを削除してください。

stylesheet.cssへ以下を追加してください

CSS
1div.row {
2  margin:0 auto;
3}

ちなみに

CSS
1.row {
2  margin:0 auto;
3}

だと「slick.css」の記述に優先順位で負けてしまいます
「div.row」として、優先順位を上げてください

投稿2022/01/17 11:15

jinba

総合スコア310

hurozuki

2022/01/17 15:35

できました！ありがとうございます！ `div.row`で指定すると優先順位が高くなるのですね！初耳でした。

jinba

2022/01/17 16:51

>`div.row`で指定すると優先順位が高くなるのですね！初耳でした。うーん、分かってない感じですプログラムは後から書いたほうが優先上書きするみたいなイメージがありますが CSSも基本同じではあるのですが、それを覆す特殊なルールがあります詳しく書いたほうが優先ルールです「.row」＜「div.row」＜「body div.row」＜「html body div.row」詳しく書いたほうが優先順位があがりますさらには「!important」を使って詳しいほうが優先順位の概念をすっとばす手法もありますざっくりとした説明ではありますが「css 優先 important」あたりのワードでググるとタイムリーな情報に出会えるのではないでしょうか

行動規範の内容に同意します