如何用 CSS 使兩個圖像水平居中？-css教學-PHP中文網

如何用 CSS 使兩個圖像水平居中？

Susan Sarandon

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

原創

529 人瀏覽過

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中文網其他相關文章！