CSSにてfloat:leftを使用して画像を3つ並べたのですが。。

質問

CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。
なんでかまったくわかりません（ToT）
教えてくださいｍ（＿＿）ｍ

【HTML】
<div class="box2"><img src="images/sum2.gif"></div>
<div class="box3"><img src="images/sum3.gif"></div>
<div class="box4"><img src="images/sum4.gif"></div>

【CSS】
.box2{
float:left;
width:219px;
}

.box3{
float:left ;
width:156px;}

.box4{
float:left ;
width:195px;
}

回答No.1

noname#19206

たぶんコレでいいはず。互換性の問題などに配慮したレイアウトです。

/* 非 IE でのセンタリング */
.hoge1 {
margin-left:auto;
margin-right:auto;
text-align:justify;
width:580px;
}

/* IE でのセンタリング */
.hoge2 {
text-align:center;
}

/* 回り込み解除 - 非 IE でのレイアウト問題 */
.hoge3 {
clear:both;
}

<div class="hoge2">
<div class="hoge1">
<div class="box2"><img src="images/sum2.gif"></div>
<div class="box3"><img src="images/sum3.gif"></div>
<div class="box4"><img src="images/sum4.gif"></div>
<div class="hoge3"></div>
</div>
</div>