如何在 HTML 和 CSS 中并排居中放置两个图像？

并排水平居中图像

当您尝试并排居中两个图像但遇到问题时，它们显示在下面另一个，让我们深入研究解决方案：

提供的 CSS 代码似乎使用相同的 ID 来定位两个图像（#fblogo）。但是，要将它们水平居中并将它们彼此对齐，我们需要应用不同的 CSS 属性：

1. 使用类对两个图像进行样式设置： 而不是使用 ID，将两个图像指定为同一类，例如 .fblogo。这将使我们能够单独定位它们。
2. 内联块显示：更改显示：块；显示：内联块；对于.fblogo。这将图像显示为内联元素，允许它们水平流动。
3. 自动边距：设置 margin-left: auto;右边距：自动；对于.fblogo。这会将图像置于其容器中的中心。
4. 包装在容器中： 将图像包装在容器（例如 div）中，其 ID 类似于 #images。
5. 对齐容器：添加text-align: center;到#images。这会将图像置于容器内的中心。

这是更新的 CSS 和HTML:

CSS

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

#images{
    text-align:center;
}

HTML

<div id="images">
    <a href="mailto:[email&#160;protected]">
    <img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg">
    </a>
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
    <img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg">
    </a>
</div>​

演示：

请参阅此处更新的演示：[DEMO链接]

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