介紹當圖示與文字並排時，即便文字換行也能讓圖示保持美觀對齊的 CSS 技巧，以及提升使用者體驗的對齊原則。
試著想像一下。當你在手機上打開購物 App 時，如果每個選單按鈕的圖示都在上方，但文字卻略微下垂；或者當文字變長時，圖示的位置變得一團糟，你會作何感想？你可能會覺得：「這款 App 的設計真不專業」，並想馬上關掉它。
我們每天使用的網站或 App 介面，其實是無數「對齊」後的產物。將圖示與文字整齊地配置在螢幕上，比想像中還要困難。今天，我想以輕鬆有趣的方式，為大家解讀這些微小卻重要的對齊原理——特別是圖示（Icon）與文字標籤（Label）的對齊。
為什麼這很重要？
設計與使用者的信賴度息息相關。當圖示與文字精準對齊時，使用者會覺得該服務經過細心維護。反之，只要些微錯位，使用者在潛意識中就會感到不適，閱讀資訊的速度也會變慢。特別是在現代這個需要跨越各種螢幕尺寸使用 App 的時代，如何確保即便文字變長導致換行，圖示位置也不會跑掉的技術，顯得益發重要。參考資料: BetterIconandLabelAlignment
深入淺出：對齊的技術
開發者為了將圖示與文字居中，常使用 align-items: center 這個設定。比喻來說，就像是把所有元素串在繩子上，讓它們對齊垂直中心。然而，這種方式在文字只有一行時沒問題，但若增加到兩行以上，圖示就會移動到文字整體的正中央，導致圖示看起來變得「肥大」或是位置尷尬。
此時，專家建議使用「起始（start）」值來取代居中對齊。參考資料: BetterIconandLabelAlignment 這就像閱讀書籍時，將圖示固定在第一行文字開始的位置一樣。如此一來，無論文字多長，圖示總能整齊地定位在第一行的開頭。
| 此外，還有按鈕設計中使用的「懸掛對齊（hanging alignment）」概念。這並非將按鈕文字對齊在可視容器（Container）的中央，而是對齊螢幕上看不見的指引線——「網格（Grid）」。[參考資料: BetterIconandLabelAlignment | CarbonDesignSystem](https://carbondesignsystem.com/components/button/usage/) 這樣做的話，當多個按鈕並排時，會產生極佳的秩序感。 |
現況：關於標籤對齊的煩惱
那麼，輸入表單中的標籤放在哪裡最好呢？標籤放在文字旁邊，或是放在上方，會導致使用者體驗截然不同。頂部對齊（Top-aligned）的標籤被認為是讓使用者瀏覽螢幕時，能最快速識別資訊的方式。參考資料: Why Infield TopAlignedFormLabelsAre Quickest to Scan
然而，頂部對齊會在每個標籤與輸入框之間製造空行，這些留白有時會變成切斷使用者視線流動的「隱形牆」。參考資料: Why Infield TopAlignedFormLabelsAre Quickest to Scan 歸根結底，完美的對齊是必須根據設計意圖，將這些微小缺點納入考量後所做出的細緻選擇。
未來會如何發展？
未來，AI 與自動化工具將會把設計系統的指引規範修飾得更加精確。即使設計師不必親自調整每個像素，也會有更多智慧型介面，能隨著文字量實時為圖示找到最佳位置。屆時，使用者將無須察覺「對齊」這個詞彙，就能像流水般順暢地接收資訊。
MindTickleBytes AI 記者觀點
構成畫面的對齊，並非單純的位置調整。這是一種無聲的體貼，彷彿在對使用者說：「我為了讓你閱讀方便，已經將這些資訊整齊分類了。」請記住，高完成度的設計並非源於華麗的特效，而是源自於這種精密的對齊。
參考資料
- BetterIconandLabelAlignment
-
[BetterIconandLabelAlignment Hacker News](https://news.ycombinator.com/item?id=49727537) -
[infoicon CarbonDesignSystem](https://carbondesignsystem.com/components/button/usage/) - Why Infield TopAlignedFormLabelsAre Quickest to Scan
- center
- end
- start
- 左對齊
- 頂部對齊（Top-aligned）
- 右對齊
- 容器
- 網格（Grid）
- 圖示