如何并排居中两个图像？

并排放置两个图像

尝试将两个图像水平居中时，通常会遇到图像垂直对齐的问题。要解决此问题，请考虑以下措施：

原始 CSS：

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

改进的 CSS：

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

#images{
    text-align:center;
}</code>

更改：

• 将 display: block 替换为 display: inline-block。
• 删除 ID 选择器 #fblogo 并使用类选择器 .fblogo。
• 添加一个新的 div，其 ID 图像和文本对齐属性设置为居中。

修改的 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>

这些修改确保图像在图像 div 内内联显示，并在父容器内水平居中。

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