ページレイアウトについて

Question

前提・実現したいこと

item-contentのブロックを中央に寄せたいのですがうまく行かないです。どれを対象にcssを書いたらいいでしょうか？

該当のソースコード

<div class="container-main">
<h1 class="cate-h1">Categorise</h1>
<div class="row">
  <div class="col-md-12">
    <div class="cate-items">
      <div class="item-content">
        <p class="item-content-title">薬物とは？</p>
        <p class="item-content-content">そもそも薬物とはどんなものだろうか</p>
        <a class="start-lesson" href="/posts/answer">Start Lesson</a>
      </div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="cate-items">
      <div class="item-content">
        <p class="item-content-title">薬物の呼び名</p>
        <p class="item-content-content">人に害を与える薬物は様々な呼び方がある</p>
        <a class="start-lesson" href="">Start Lesson</a>
      </div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="cate-items">
      <div class="item-content">
        <p class="item-content-title">薬物による事件</p>
        <p class="item-content-content">薬物によってどんな事件が起こったのか</p>
        <a class="start-lesson" href="">Start Lesson</a>
      </div>
    </div>
  </div>
</div>
</div>

試したこと

item-contentにmargin:auto
item-contentにtext-align:center
rowにmargin:auto
rowにmargin:auto

結果はすべて見た目に変化なし。移動すらしませんでした。
container-mainにmargin: autoを書いたらcategoriseの部分だけ中央寄せになりました。

Answer 1

CSSがわからないので勘で答えてみます。
border: 1px solid #fff;などが指定されている要素に、
横幅の指定をしている要素に、
以下の指定を行うと左右中央配置になるのではと思います。

横幅の指定がある要素 {
  margin: 0 auto; /* margin: auto;でも可 */
  display: block;
}

「.item-content」には指定してみた、とのことなので以下ではないかと想像します。

.cate-items {
  margin: 0 auto;
  display: block; /* 不要かもしれません。 */
}

---

追記:
CSSソースを提供していただいたので、こちらで試してみました。
やはり「.cate-items」への指定で左右中央配置できそうです。

↓そのままだと見えなかったので、.cate-itemsに「赤」を指定しています。

Comments

[tetsuya7724]

すみません。cssを載せていませんでした。
対象のcssを載せます。

.container-main{
margin: auto;
}

.item-content{
margin: auto;
}

.start-lesson{
color: white;
text-decoration: none;
position: relative;
display: inline-block;
font-weight: bold;
padding: 5px 11px 5px 15px;
text-decoration: none;
transition: .4s;
}

.start-lesson:before {
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top: 0;
left: 0;
border-radius: 3px;
background:#67c5ff;
}

.start-lesson::after {
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top:0;
left: 100%;
border-radius: 3px;
background:#67c5ff;
}

.item-content-title{
font-size: 30px;
}

.cate-items{
width: 500px;
}

[new1ro]

ありがとうございます！
やはり、以下の記述を追加することで左右中央配置はできそうです。
.cate-items {
margin: 0 auto;
display: block;
}

回答に、こちらで試してみた結果の画像を添付します。

[new1ro]

加えて、説明を修正しました。
枠線を指定している要素、ではなく
横幅を指定している要素に、margin: 0 auto;を指定するとよさそうです。

[tetsuya7724]

.cate-items {
margin: 0 auto;
}
としたらうまくいきました。ありがとうございます。

[new1ro]

解決できたようで、よかったです！