首页  >  文章  >  web前端  >  如何并排居中两个图像?

如何并排居中两个图像?

DDD
DDD原创
2024-11-02 00:39:31587浏览

How to Center Two Images Side by Side?

并排放置两个图像

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

原始 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn