css - Evenly space href img's in div

Question

I'm having a hard time trying to figure out how to evenly space 3 href img's on both sides in a div container.

visual example: [ X X X ]

(X = href img [ ]=container div)

<div id="container">
  <a href="#"><img src="image1.jpg"></a>
  <a href="#"><img src="image2.jpg"></a>
  <a href="#"><img src="image3.jpg"></a>
</div>

CSS:

#container {
  clear: both;
  width: 900px;
  height: 150px;
}
#container a img {
  margin: 0 auto;
}

Any help is much appreciated. Thanks

Answer 1

等間隔にしたいので、画像の幅としてパーセンテージを使用することをお勧めします。例えば：

#container {
  clear: both;
  width: 900px;
  height: 150px;
}
#container a img {
  float: left;
  width: 33%;
}

これにより、アンカーが親 div 内に浮かび、水平方向に整列するはずです

Answer 2

ここに例があります - jsFiddle。Chrome 21、IE9、FF13、Safari 5、Opera 11 でテスト済み。

#container {
  clear: both;
  width: 900px;
  height: 150px;
}
#container a {
  float: left;
  display: block;
  width: 300px;
  text-align: center;
}
#container a img {
  margin: 0 auto;
}

Answer 3

これを試して

#container a {float:left; padding:0 10px}