如何在 HTML 和 CSS 中並排居中放置兩個圖像？

並排水平居中圖像

當您嘗試並排居中兩個圖像但遇到問題時，它們顯示在下面另一個，讓我們深入研究解決方案：

提供的CSS 程式碼似乎使用相同的ID (#fblogo) 來定位兩個影像。但是，要將它們水平居中並將它們彼此對齊，我們需要應用不同的CSS 屬性：

1. 使用類別對兩個圖像進行樣式設定： 而不是使用ID ，將兩個圖像指定為同一類，例如.fblogo。這將使我們能夠單獨定位它們。
2. 內聯塊顯示：更改顯示：塊；顯示：內聯塊；對於.fblogo。這將圖像顯示為內聯元素，允許它們水平流動。
3. 自動邊距：設定 margin-left: auto;右邊距：自動；對於.fblogo。這會將影像置於其容器中的中心。
4. 包裝在容器中： 將圖像包裝在容器（例如 div）中，其 ID 類似於 #images。
5. 對齊容器：加入text-align: center;到#images。這會將影像置於容器內的中心。

以下是更新後的CSS 和HTML：

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>​

示範：

請參閱此處更新的示範：[示範連結]

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