如何在同級寬度不等的水平佈局中將中間項置中？

維護具有不同同級寬度的中間項目的中心對齊

此問題解決了在水平佈局中將中間項目居中的挑戰其側邊物品的寬度可能會有所不同。期望的效果是確保即使側面項目大小不等，中間項目也保持居中。

為了實現這一點，採用了嵌套彈性盒方法。以下 CSS 規則構成了這個解決方案的核心：

在容器內，每個盒子的 flex 值為 1，確保它們按比例共享可用空間。然後，每個框都顯示為帶有 justify-content: center 的彈性容器，以將其內容置中。

對於第一個框，使用 margin-right: auto 將右邊距應用於其子元素，反之亦然，使用 margin-left: auto 將左邊距應用於最後一個框的子元素。這使得邊距自動增長，將內容推到各自的邊緣，有效地將中間框對齊在中心。

這個解決方案達到了預期的效果，確保中間項保持居中，無論其寬度如何兄弟盒子。它是一個純 CSS 解決方案，不需要額外的腳本或絕對定位。

以上是如何在同級寬度不等的水平佈局中將中間項置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！