divの中の画像を中央に配置したい時　もっと優しく

前回divの中の画像を中央に配置したい時
と言う記事を書いたのですが、ちょっと乱暴だったのでもう少し見た方が使えるように書きなおしますね！
画像を単に真ん中に配置したいと言う方もいないわけではないでしょうが、きっと「ページの中に画像を2つ並べてそれをさらに中央に表示したいんだ」なんて方が多いのではないでしょうか。
画像の数は増やしても同じなので2つのパターンで説明します。

まずは画像をひとつ表示してみます。

<img src="http://hero-style.com/wp-content/themes/Xeory-Base-child/imges/home/mail_b.png" alt="" />

単純に画像がそのまま左よせで表示されました。

つぎに画像をセンターに表示します。
HTMLは

<div class="center_wide">
<img src="http://hero-style.com/wp-content/themes/Xeory-Base-child/imges/home/mail_b.png" alt="" />
</div>

CSSは

.center_wide{
text-align:center
}

画像が中央表示、センターになりました。

ちなみにCSSは

width: 100%; 
margin: 0 auto;

でも同じように画像を中央に表示できます。

それでは画像が複数あるときはどうしましょうか。
単純に画像をふたつ表示します。

予想通り縦に並んでしまいましたね。
そうです、横に並べたい時はfloatさせないといけないわけですよ。

HTMLは
oyadiv_sample　と言うdivで画像ふたつを包んでいるdiv_mail・div_linedivをつつみます。

<div class="oyadiv_sample">
<div class="div_mail">
<div class="mail_img"><img src="http://hero-style.com/wp-content/themes/Xeory-Base-child/imges/home/mail_b.png" alt="" /></div>
</div>
<div class="div_line">
<div class="line_img"><img src='http://hero-style.com/wp-content/themes/Xeory-Base-child/imges/home/bard.png' /></div>
</div>
</div>

CSSは.oyadiv_sampleのdivでふたつの画像を表示したい領域を80%にしています。※好みで変えてください
.div_mailは左に寄せて、.div_lineは右に寄せています。
フロートさせてそれぞれ.oyadiv_sampleの50％の大きさの幅にしています。合計100％です。
.mail_imgなどimgはそれぞれのdivの中で100％で表示させています。
レスポンシブにしたい時は切り替えたいピクセルにてフロートを解除したりします。

.oyadiv_sample {
	width: 80%;
	margin: 0 auto;
}
.div_mail {
	float: left;
	width: 50%;
}
.mail_img {
	width: 100%;
	margin: 0 auto;
}
.mail_img img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.div_line {
	float: right;
	width: 50%;
}
.line_img {
	width: 100%;
	margin: 0 auto;
}
.line_img img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

次は時間がありましたら、テーブルのように使えるdisplay: table-cellの説明をしたいですね。
floatと同じように横に並べるレイアウトが可能な上にテキストなど、中の要素の高さが違う場合に高さを揃えられるすぐれものです。
あ、ちなみにfloatしたらfloatは解除してくださいね。
そうしないと下のコンテンツに引き継がれてしまいます。
こちらもまたの機会に。。。