如何在同一行水平對齊內聯塊？

在同一行水平對齊內聯塊

問題

內聯塊比浮動元素具有優勢，例如基線對齊和自動居中當視口變窄時。然而，在同一行上水平對齊兩個內聯區塊可能會帶來挑戰。

內聯塊對齊的挑戰

• 浮動可能會幹擾基線對齊並導致不必要的環繞.
• 相對和絕對定位可能會導致間距問題，類似於浮動。

解決方案：使用文字對齊

一個有效的解決方案涉及使用文字對齊: justify 技巧：

CSS 程式碼

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

說明

• 將父元素的text-align 設定為“justify”，以使文字在其寬度上均勻分佈。
• 加入偽元素 header:after 來消耗 inline-blocks 之間的剩餘空間。
• 設定 inline-blocks h1 和 .nav 顯示：inline-block 和 Vertical-align ：維持基線的基線。

以上是如何在同一行水平對齊內聯塊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！