如何用 CSS 使两个图像水平居中？-css教程-PHP中文网

如何用 CSS 使两个图像水平居中？

Susan Sarandon

发布： 2024-11-02 10:52:02

原创

530 人浏览过

How to Center Two Images Horizontally with CSS?

使用 CSS 将两个图像水平居中

尝试并排对齐两个图像时，通常会遇到它们垂直堆叠的情况。为了解决这个问题，我们可以修改 CSS 代码。

在提供的 HTML 代码中，两个图像放置在锚标记内。 CSS 代码旨在将这些图像居中，但无意中将它们垂直堆叠。让我们调整 CSS 以实现正确的水平对齐。

第一个修改是将图像的显示属性从“块”更改为“内联块”。 Inline-block 允许元素被视为块（可以设置宽度和高度），同时仍表现为内联元素。

<code class="css">#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>

登录后复制

变为：

<code class="css">.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>

登录后复制

进一步将图像正确居中，我们引入了一个新的 CSS 规则。

#images{
    text-align:center;
}

登录后复制

此规则将包含两个图像链接的“images”div 元素的内容对齐到中心。

最后，我们需要更新 HTML 代码，为两个图像提供一个公共类名称“fblogo”，该名称在修改后的 CSS 代码中引用。修改后的 HTML：

<code class="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></code>

登录后复制

通过这些修改，两个图像现在将居中并并排显示。

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