在一个div中居中两张图片

Question

我有一个类似于这样的div

<div id="browsers">
  <h2>Title</h2>
  <p>Text recomending the use of either Chrome or Firefox.</p>
  <a href="http://google.com/chrome/"><img src="img/64-chrome.png" /></a>
  <a href="http://mozilla.org/firefox/"><img src="img/64-firefox.png" /></a>
</div>

和 CSS

#browsers {
  margin:0 auto;
  padding:22px;
  width:500px;
  background:white;
}

我想把两个图片居中放在一个div中。我已经使用以下代码将它们居中了：

#browsers img {
  margin-left:auto;
  margin-right:auto;
  display:block;
}

然而输出的结果不是我想要的，因为一幅图片在另一幅图片上面。我希望它们能在同一行。最好或者通常的方法是什么？

- rberaldo

Answer 1

通常只需使用#browsers {text-align:center;}，并删除#browsers img {...}中的内容。

由于您在#browsers中添加了额外的内容，您需要将浏览器图标放在单独的div中或将其它的额外内容放在#browsers之外。

例如： <div class="browser-icons"> ... </div>

- Lee Kowalkowski

---

这个方法相当有效。在寻找答案的过程中，我已经阅读了一些内容，但是它并不是正确的做法。目前我会继续使用这种方法，直到有人提供另一个选项。谢谢！ - rberaldo

@rberaldo：那个链接说在IMG元素上使用text-align:center不是正确的方法，我建议将它应用于IMG元素的容器，而不是IMG本身。 - Lee Kowalkowski

你说得有道理。我自动地认为它不应该用于居中任何图像，因为它的本意是用于居中文本（只是猜测，但这个属性被称为“文本对齐”）。 - rberaldo

是的，但图片属于内联元素，因此它们会被插入到文本中，例如，当以这种方式呈现时，它们将影响行高。它们也可以放在<a>元素（链接）中，而HTML4中的链接中不能有任何块级元素，尽管现在在HTML5中允许这样做。 - Lee Kowalkowski

有趣。谢谢解释。 - rberaldo

Answer 2

你的问题在于你告诉图片是块级元素，使用 display:block; ... 尝试使用 display:inline; 代替。

- admin

---

我以前试过这个，但没有成功。使用display:inline;，虽然图标在同一行，但由于某种原因它们被靠左对齐。 - rberaldo