如何使用 CSS 将两个图像并排居中？

使用 CSS 并排居中图像

问题：

我在尝试将两个图像居中时遇到问题我的 HTML 文档中的图像彼此相邻。尽管我做出了努力，但它们始终将一个显示在另一个之下。如何有效地将图像居中并并排放置？

HTML 代码：

<a href="mailto:%5Bemail%C2%A0protected%5D">
<img src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg" class="lazy" id="fblogo" border="0" alt="Mail">
</a>
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
<img src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg" class="lazy" id="fblogo" border="0" alt="Facebook">
</a>

CSS 代码：

#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
}

解决方案：

要水平对齐图片，修改 CSS 代码如下：

.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
}

#images{
    text-align:center;
}

修改 HTML：

<div id="images">
    <a href="mailto:%5Bemail%C2%A0protected%5D">
    <img class="fblogo lazy" src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg" border="0" alt="Mail">
    </a>
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
    <img class="fblogo lazy" src="/static/imghwm/default1.png" data-src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg" border="0" alt="Facebook">
    </a>
</div>​

现场演示：

[演示链接]

以上是如何使用 CSS 将两个图像并排居中？的详细内容。更多信息请关注PHP中文网其他相关文章！