在同一行水平對齊內聯塊

問題

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

內聯塊對齊的挑戰

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

解決方案：使用文字對齊

一個有效的解決方案是利用文字對齊: 證明技巧:

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”，使文字在其寬度上均勻分佈。
• 加入偽元素標題：after消耗內聯塊之間的剩餘空間。
• 設定內聯塊 h1 和 .nav 以顯示：內聯塊和垂直對齊：基線以保持其基線。