将两个图像放在 div 中居中
我有一个像这样的 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;
}
但输出不是我想要的，因为一个图像位于另一图像的顶部。我希望他们在同一条线上。最好的或通常的方法是什么？
I have a div like this
<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>
and the CSS
#browsers {
margin:0 auto;
padding:22px;
width:500px;
background:white;
}
and I want to center the two images in the middle of the div. I have managed to center them with
#browsers img {
margin-left:auto;
margin-right:auto;
display:block;
}
however the output is not what I want, since one image is on the top of the other. I want them to be on the same line. What's the best or the usual way to do it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
通常只需
#browsers {text-align:center;}并删除#browsers img {...}中的内容，因为
# 中有额外的内容浏览器。您需要将浏览器图标放在单独的div中或将额外的内容放在#browsers之外。例如。
Usually just
#browsers {text-align:center;}and remove what you have in#browsers img {...}As you have extra stuff in
#browsers. You'll need to put your browser icons in a separatedivor your extra stuff outside of#browsers.Eg.
<div class="browser-icons"> ... </div>您的问题是您告诉图像是
display:block;中的块...尝试display:inline;代替。Your problem is that you are telling the images are blocks in
display:block;... trydisplay:inline;instead.