如何在 CSS 中並排放置兩個圖片？

在CSS 中將兩個圖像並排居中

網頁設計中的一個常見挑戰是水平對齊圖像，尤其是當它們需要對齊時並排顯示。這可能很棘手，但透過對 CSS 進行一些調整，您可以輕鬆實現所需的結果。

一個常見的方法可能是使用 display: block 和 margin: auto 屬性。然而，這種方法通常會導致影像垂直堆疊而不是水平堆疊。

要解決這個問題，這裡有一個改進的解決方案：

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:

HTML:HTML:HTML:透過為影像設定display: inline-block ，您可以允許它們沿著基線水平相鄰流動。此外，套用於父容器的 text-align:center 屬性可確保映像在容器內居中。 此方法可保證影像並排對齊，從而提供視覺上吸引人且響應靈敏的佈局.

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