css - 在 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;
}

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

Answer 1

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

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

例如。

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