CSS <img>を中央揃えにしたい

Question

前提・実現したいこと

progate HTML&CSS 道場編　初心者コース３
<img>を中央揃えにしたいです。

#ソースコード

<div class="contents-container">
      <h3 class="contents-title">学べるレッスン</h3>
      <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
        <p>HTML & CSS</p>
      </div>
      <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
        <P>PHP</P>
      </div>
      <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
        <p>Ruby</p>
      </div>
      <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
        <p>Swift</p>
      </div>
    </div>

 .contents-container {
  background-color:red;
  text-align:center;
}
.contents-item {
  float:left;
  background-color:blue;

}

# 試したこと
<img>の親要素である、<div class="contents-container>にtext-align:center;を当てましたが、子要素の<h3>学べるレッスンが中央揃えになるだけでした。
他にも<img>にdisplay:block;を当てて　margin:0 auto;やflexboxにも挑戦してみましたが、動かせませんでした。

回答よろしくお願いいたします。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
質問は編集できます。

[noko0505]

ご指摘いただいたように、code機能を使い再度編集しました。
とても読みにくい本文で大変申し訳ございませんでした。

[noko0505]

ご指摘いただきありがとうございます。
ご指摘いただいたように、code機能を使って再度、編集しました。
大変読みにくい本文だったかと思います。
申し訳ございませんでした。

[m.ts10806]

特に謝ってほしいわけではないですが、初めて利用する際はガイドライン読んだり他の投稿を見て雰囲気はつかんでおいた方がお互い有益かと思います。
あと「初歩的な」とかは書く必要ないです。誰が判断するのか？というのもありますし、「初心者である」ということを伝えたいのでしたら「初心者アイコン」が質問につけられます。

[noko0505]

ご丁寧にありがとうございます。
次の質問から活用させていただこうと思います。

[m.ts10806]

質問はいつでも編集できるので、いつくるか分からない次回に回すより今対応された方が良いかと思います。
おそらく多くの人は前の自分の質問を複写して投稿します。定型的なところはそのままにしてしまう恐れがあります。となると、みている方も全ての人を覚えてるわけでもなく過去質問をいちいち確認するわけでもないので同じ指摘を繰り返されることになります。

何より、この質問も半永久的に残り続けます。

[noko0505]

ご指摘の通りすぐに修正するべきでした。
ご指摘いただいたのに、修正しない自分の姿勢こそ一番問題でした。
m.ts10806様の返信で、プログラミング以前にもっと根本的なことを学ばせていただきました。
何からなにまで、ご指導いただきありがとうございます。

今後もご指導ご鞭撻のほどよろしくお願いいたします。

Answer 1

何を何に対して中央寄せしたいのか明確にしましょう。

現状だとimgは親要素の.contents-itemと同じ幅になっているので移動する余地はありません。

４つの.contents-itemが横並びになってますが、それ全体を親要素(contents-container)に対して中央寄せしたいのでしょうか。
だとしたら、img や .contents-item にCSSを設定しても無意味だということが理解できると思います。

---

レイアウトの細かい仕様が不明瞭ですが、
とりあえず、

• contents-containerの幅で h3.contents-title は中央寄せ
• ４つの .contents-item は横並び
• ４つの .contents-item全体がcontents-containerの幅で中央寄せ
• HTMLは現状のまま

ということだとしてコード例を提示します。

.contents-container {
  background-color: red;
  width: 100%;
  height: 500px;
}
.contents-item {
  background-color: blue;
  text-align: center;
}
.contents-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
..contents-title {
  flex: 0 0 100%;
  text-align: center;
}

Comments

[noko0505]

ご回答ありがとうございます。
補足していただいたように、全体の親要素（contents-container)に対して中央揃えがしたかったです。
質問の本文も編集しましたが、（contents-container)にtext-align:center;を当てると、ｈ３（学べるレッスン）のみが中央揃えになりました。
そこでimgのみ中央揃えにしたいです。

[hatena19]

回答にコード例を追加しましたので参照ください。

[noko0505]

ありがとうございました。
無事中央揃えにすることができました。
頂いたコードを読みながら、もう一度flexbooxを勉強しようと思います。