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>

Answer 2

您的问题是您在display:block;中告诉图片是块...而是尝试display:inline;。

在div中居中两个图像

2 个答案: