如何並排居中兩個影像？

並排放置兩個影像

嘗試將兩個影像水平居中時，通常會遇到影像垂直對齊的問題。要解決此問題，請考慮以下措施：

原始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。

<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，其 ID 圖像和文字對齊屬性設定為居中。

修改的 HTML：這些修改可確保圖片在圖片 div 內內聯顯示，並在父容器內水平居中。

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