ブロック要素の中の画像のみセンタリング

Question

お世話になります。

以下の会員登録はこちらからというバナーをの中に入れているのですが、
イメージ画像だけセンター配置にしたい時は、どのようなコードを追加したら
よいでしょうか。文字は左寄せで、イメージのみ中央です。

.contents_box img{
margin:50px auto;
}

このようなCSSを書いていますが、間違いのようです。
また、ページ全体のcss にtext-alignを指定していますが、中のコンテンツが中央寄せになりません。

以下のページです。
http://www.morinoen.com/html/page87.html

センタリングにしても見栄え的にはほとんど変わりませんが、気になるので教えてください！宜しくお願い致します。

Answer

ECマスターズの田中です。

回答の前に、いただいたページの構造を整理いたしますと、
ページ本文を囲む、横幅730pxの、
その中に横幅670pxのが左寄せで配置されており、
その中に「会員登録はこちら」のimgタグが設置されております。

はdivタグ、つまりブロック要素のため
親要素のtext-alignの指定にかかわらず、左寄せで設置されております。
の中でを中央に配置するには、
.contents_box に対して、たとえば margin: 0 auto; を指定し、
左右の余白を自動計算するようにご設定ください。

中の文字の配置は、.contents_box の text-align プロパティにてご設定ください。
centerに指定すると、ご質問いただいた画像も、合わせて中央に配置されます。

画像だけ中央に設置したい場合ですが、
imgタグ
は初期状態で「display: inline-block;」が設定される要素ですので、
・いただいたスタイルシートに「display: block;」要素を追加する
・タグごと、と、もしくはとで囲む
といった方法でご対応いただきますようお願いします。

Answer

田中様


いつもありがとうございます。

詳しく教えて頂きありがとうございます。
仕組みも理解しました。
もやもやしていた気持ちが晴れました！
ありがとうございます。