div中的均匀空间href img答案

【问题标题】：Evenly space href img's in divdiv中的均匀空间href img
【发布时间】：2012-08-08 19:19:42
【问题描述】：

我很难弄清楚如何在 div 容器的两侧均匀地放置 3 个 href img。

视觉示例：[ X X X ]

(X = href img [ ]=容器 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;
}

非常感谢任何帮助。谢谢

【问题讨论】：

您的图片有多宽？您希望它们集中且均匀分布吗？

标签： css html alignment image

【解决方案1】：

好的，因为您希望它们均匀分布，我建议使用百分比作为图像的宽度。例如：

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

这应该使您的锚点在父 div 中浮动，以便它们水平对齐

【讨论】：

或根据上述图像的大小将图像放在容器内自己的div中

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

这是一个示例 - 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;
}

【讨论】：