imgが中央揃えにならない

Question

いつもお世話になってます。

質問は表題の通りです。

すごく単純な質問で申し訳ないのですが、画像が中央揃えになりません。

コードは下記です。

<div class="mainvisual_">
    <img src="img/event/feature-refreshlemon/sample_image.gif" alt="">
 </div>

#feature-refreshlemon .mainvisual_ {
	background-image: url("img/event/feature-refreshlemon/sample_image.gif");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 1000px;
	margin: 0 auto;
}

#feature-refreshlemon .mainvisual_ img {
	margin: 0 auto;
	border: 2px solid rgb(207, 145, 21);
}

border: 2px solid rgb(207, 145, 21);は反映されるのですが、
margin: 0 auto;だけ反映されません。

検証上は適用、、というか表示はされています。

何か凡ミスしている気配がプンプンするのですが、原因が特定出来ませんでした。
ちなみにmargin: 0 auto;をmargin: 0 30px;と指定すると動きます。

その他必要情報があれば追記致しますのでおっしゃってください。

宜しく御願いします。

Answer 1

imgはインライン要素なので、
・親要素にtext-align: center;をつけるか（この場合はmargin: 0 auto;消してOK）
・margin: auto;でセンター寄せするならdisplay: block;にするかですね
親要素をflexにしてflexの中央寄せとかでもいいんですけど、今回はそれは求められていないので、
上のどちらかでいいと思います。
どっちのやり方もすでに回答されていますが。

Comments

[kato00]

親要素にtext-align: center;をつけて動きました！
いつも分かりやすい説明ありがとうございます！

Answer 2

#feature-refreshlemon .mainvisual_ img {
    margin: 0 auto;
    border: 2px solid rgb(207, 145, 21);
    display: block; /* ADD */
}
```**動くサンプル：**[https://jsfiddle.net/1ymnv69z/](https://jsfiddle.net/1ymnv69z/)

Answer 3

text-align: center; を追加してみてはどうでしょうか。

#feature-refreshlemon .mainvisual_ {
    background-image: url("img/event/feature-refreshlemon/sample_image.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}