如何使用 CSS 將兩個圖像並排居中？-css教學-PHP中文網

如何使用 CSS 將兩個圖像並排居中？

Barbara Streisand

發布： 2024-11-02 20:01:30

原創

956 人瀏覽過

How to Center Two Images Side-by-Side Using CSS?

使用CSS 並排居中圖像

問題：

我在嘗試將兩個圖像居中時遇到問題我的HTML 文件中的影像彼此相鄰。儘管我做出了努力，但它們始終將一個顯示在另一個之下。如何有效地將影像居中並並排放置？

HTML 程式碼：

<a href="mailto:[email&#160;protected]">
<img id="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 id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/>
</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:[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>

登入後複製

現場示範：

[示範連結]

以上是如何使用 CSS 將兩個圖像並排居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！