在一个 div 中居中两个图像答案

【问题标题】：Center two images in a div在一个 div 中居中两个图像
【发布时间】：2012-01-03 02:09:43
【问题描述】：

我有一个这样的 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;
}

但是输出不是我想要的，因为一个图像在另一个图像的顶部。我希望他们在同一条线上。最好或通常的方法是什么？

【问题讨论】：

标签： css centering

【解决方案1】：

通常只需 #browsers {text-align:center;} 并删除您在 #browsers img {...} 中的内容

因为你在#browsers 中有额外的东西。您需要将浏览器图标放在单独的 div 或 #browsers 之外的其他内容中。

例如。

<div class="browser-icons"> ... </div>

【讨论】：

这很好用。然而，我在寻找我的问题的答案时阅读了it's not the proper way to do it。我会暂时坚持下去，直到有人给出另一种选择。谢谢！
@rberaldo：该链接在 IMG 元素上显示 text-align:center 不是这样做的方法，我是说在 IMG 元素的容器上而不是在 IMG 本身上这样做。
你说得有道理。我不自觉地认为它不应该用于完全居中任何图像，因为它旨在居中文本（这只是一个猜测，但该属性毕竟称为*text*-align）。跨度>
是的，但是图像是内联元素，所以它们被插入到文本中，例如当像这样渲染时，它们会影响行高。它们也可以进入元素（链接）中，并且在 HTML4 中的链接中不能有任何块级元素，尽管现在 HTML5 允许这样做。
有趣。谢谢你的解释。

【解决方案2】：

您的问题是您告诉图像是 display:block; 中的块...改为尝试 display:inline;。

【讨论】：

我以前试过这个，没用。对于display:inline;，虽然图标在同一行，但出于某种原因，它们会向左对齐。