請運用 5 項中央技巧進行一系列測試,看看哪一項最能彈性改變。
在 CSS 中設定居中位置一直是個難題,也經常成為笑話和嘲諷的題材。2020 年 CSS 已長大成人,現在我們可以誠實地笑著這些笑話,而不是咬牙切齒。
如果您喜歡看影片,請參考這篇文章的 YouTube 版本:
難題
置中有多種類型。從不同的用途、要對齊的物件數量等。為了說明「最佳」對齊技巧背後的理由,我製作了「韌性鈴聲」。這項工具會針對各個居中策略進行一系列的壓力測試,以便您觀察其成效。最後,我會揭露最高得分技巧,以及「最有價值」的內容。希望您能學到新的居中對齊技巧和解決方案。
響應韌性環
我認為,彈性鈴聲代表了我的信念,即以中心對齊的策略應能應對國際版面配置、可變大小的可視區域、文字編輯和動態內容。這些原則有助於制定以下韌性測試,讓以中心為準的技術能夠持續運作:
- 壓縮:居中應可處理寬度的變更
- 已壓平:居中應可處理高度變更
- 重複:居中應根據項目數量而動態調整
- 編輯:居中應根據內容長度和語言動態調整
- 流程:置中功能應不受文件方向和書寫模式影響
獲勝的解決方案應在壓縮、壓扁、複製、編輯及切換至各種語言模式和方向時,讓內容保持在中心,以展現其彈性。可靠且具備復原能力的中心,安全的中心。
圖例
我們提供了一些視覺顏色提示,可協助您將某些中繼資訊保留在背景資訊中:
- 粉紅色邊框表示擁有置中樣式的擁有權
- 灰色方塊是容器的背景,可讓項目居中顯示
- 每個子項都有白色背景顏色,方便您查看居中技術對子項方塊大小 (如有) 的影響
5 位參賽者
5 種重心技術進入 Resilience Ringer,只有一個會獲得 Resilience Crown 👸?。
1. 內容中心
- Squish:太好了!
- Squash:太好了!
- Duplicate:太好了!
- 編輯:太好了!
- 流動:太好了!
display: grid
和 place-content
的簡寫方式非常精簡,很難超越。由於此方法會將子項集中並對齊,因此是針對可讀取的元素群組的穩固居中對齊技巧。
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- 即使在受限空間和溢位情況下,內容仍會置中顯示
- 集中編輯及維護內容
- Gap 可確保 n 個子項之間的間距相同
- 格線預設會建立資料列
- 最寬的子項 (
max-content
) 會設定其餘所有子項的寬度。這將在 Gentle Flex 中詳細說明。
適用於包含段落和標題、原型設計,或一般需要清楚顯示居中的內容的宏觀版面配置。
2. 柔和 Flex
- 烏賊:太好了!
- 壁球:太好了!
- 複製:太好了!
- 編輯:太好了!
- 流程:太好了!
溫和的彈性策略是「只」以中心為準的策略。這項操作方式溫和輕柔,因為與 place-content: center
不同,在對齊期間,不會變更任何子項的方塊大小。盡可能讓所有項目堆疊、置中且間隔均勻。
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- 只處理對齊、方向和分布
- 編輯和維護作業都在同一個地方
- Gap 可確保 n 個子項之間的間距相同
- 程式碼行數
適合宏觀和微觀版面配置。
3. 自動機器人
- 烏賊:很棒
- 壁球:很好
- 重複:沒問題
- 編輯:很好
- 流程:非常好
容器已設為 Flex,且沒有對齊樣式,而直接子項則採用自動邊界樣式。對於 margin: auto
處理元素的所有面來說,有一點懷舊也很好奇。
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- 有趣的訣竅
- 迅速髒亂
- 溢位時產生不自然的結果
- 仰賴發布而非間隔,意味著版面配置可能會在子項觸控側邊發生版面配置
- 將子項「推送」至位置似乎不是最佳做法,且可能導致子項的方塊大小發生變化
非常適合將圖示或疑似元素置中。
4. 毛茸茸星中心
- 靜音:壞
- 壁球:不佳
- 重複:不良
- 編輯:太好了!
- 流程:太好了!(只要您使用邏輯屬性)
參賽者「鬆軟的中心」是目前聽起來最美味的參賽者,也是唯一由元素/子項擁有的居中對齊技巧。請參閱我們的單獨內部粉紅邊框!
.fluffy-center {
padding: 10ch;
}
- 保護內容
- 核能
- 每項測試都會秘密採用這個置中策略
- 文字間距為空白
- 對不實用的幻覺
- 容器和項目之間發生衝突,因為每個項目都堅持自己的大小
適用於以字詞或字詞組為中心的對齊方式、標記、藥丸、按鈕、方塊等。
5. Pop & Plop
- Squish:正常
- 正方形:尚可
- 重複:不良
- 編輯:沒問題
- 流程:良好
這是因為絕對定位會將元素彈出正常流程,名稱中的「plop」一詞,是因為我發現這個名稱最實用:將其放在其他內容上方。這是經典且方便的疊加圖層居中技術,可靈活且動態調整內容大小。有時您只需要將 UI 放在其他 UI 上。
- 實用
- 穩定可靠
- 在需要時,它就是無價之寶
- 含有負值百分比值的程式碼
- 需要
position: relative
才能強制包含區塊 - 過早且突兀的換行
- 每個包含區塊只能有 1 個,無需額外操作
適用於模態、Toast 和訊息、堆疊和深度效果、彈出式視窗。
得獎者
如果我身處孤島,只能使用 1 種居中對齊技巧,那就是
[鼓聲]
Gentle Flex 🎉?
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
您隨時可以在我的樣式表中找到它,因為它對宏觀和微觀版面配置都很實用。這是一項全面可靠的解決方案,結果符合我的期望。此外,因為我是固有規模的固體方法 所以我通常能升級到這個解決方案雖然輸入的內容很多,但帶來的好處遠大於額外的程式碼。
最小可行性產品 (MVP)
Fluffy Center
.fluffy-center {
padding: 2ch;
}
Fluffy Center 的微調功能非常細微,很容易被忽略,但它是我用來對齊圖片的常用技巧。它非常原子化,有時我會忘記自己正在使用它。
結論
哪些類型的內容打破主要策略?還有哪些挑戰可以加入復原鈴聲?我考慮在容器上使用翻譯和自動高度切換功能,還有其他想法嗎?
既然你知道我如何做到,你會怎麼做呢?讓我們多方嘗試,瞭解在網路上建構應用程式的所有方式。與本文有關的程式碼研究室,建立自己的中心範例,就像本文中的範例。推文你的版本,我會將其加入下方的社群重混專區。