??[[173849]]
??
本文和以前的文章類似，orange 盡量帶給大家分享實際項目中的坑怎么填，當然只是提供思想，方法很多歡迎討論，還有就是對于剛上手前端的新人不是特別友好，沒關(guān)系，涉及到基礎(chǔ)知識我會對應的進行指引，給出鏈接或給出提示，大家可以自行 Google(百度)。
說到行內(nèi)對齊大家可能會想到類似水平對齊，垂直對齊總結(jié)類型的文章，既然我們叫 黑魔法 就不會是基礎(chǔ)的對齊教程，基礎(chǔ)教程的文章好多，大家想必都知道多種方法實現(xiàn)對齊
<!--more-->
項目背景
還是 orange 所在公司的移動端項目，上案例
截多了，咱們只看第一行的文字，算是每一天都有的 title，有人說: TMD 你在逗我?這有什么可講的誰都會寫好不好!
先別激動，我當然不是解釋這個布局怎么實現(xiàn)的，簡單的例子更容易解釋問題，繼續(xù)往下看初步實現(xiàn)的代碼，
<div class="date-wrap"> "date">14 OCT</span> "multiple">x</span> "desc">今日瞎選6篇</span> </div> <style type="text/css"> date-wrap { width: 100%; height: 60px; relative; text-align: center; line-height: 60px; size: 18px; font-weight: 600; } .multiple { color: #f8ac08; } </style>截圖如下
??
??
細心的朋友看出問題了，看不出也沒關(guān)系，我們加兩條輔助線嘛!
<div class="date-wrap"> "date">14 OCT</span> "multiple">x</span> "desc">今日瞎選6篇</span> "line-top"></div> "line-bottom"></div> </div> <style type="text/css"> /* 這里是前面的樣式，不重復給出 */ top { width: 100%; height: 1px; absolute; left: 0; top: 21px; background-color: #000; } .line-bottom { width: 100%; height: 1px; absolute; left: 0; bottom: 21px; background-color: #000; } </style>效果如下
??
??
好，相信大家現(xiàn)在一目了然存在的問題了，那就是前面的 date 并沒有垂直居中，原因呢!解釋起來也簡單
這里只需要修改一行代碼就能回答大家的疑問
<span class="date">14 OCT orange</span>
將上文對應 html 修改后，得到截圖
??
??
這個讓我不禁想起了小學英語作業(yè)本的四線格，哈哈，大寫字母的確都在上方的兩個格，而小寫上中下都有例子，單獨看 g，很好解釋上面的顯現(xiàn)了吧。
看似簡單的案例還就是這么特殊，恰巧都是數(shù)字和大寫字母，細心的還會發(fā)現(xiàn)后面的 6 也有問題，一不留神，不居中了，設(shè)計來找你，你一臉蒙逼的說我是按照居中寫的啊，解決不了了?
不是的，我們接下來就是解決這個問題的，現(xiàn)實項目要更復雜一些，有經(jīng)驗的前端知道字體間的差異，個別的字體上下相差特別懸殊，
這里前后的字體是不同的，但幸好垂直方向的差異不是很大，這里我引入了項目原有的字體，中間的 x 其實是個 svg 這里不贅述。因為看懂思想再來一百個不對齊的你也能迎刃而解。
進入真正的魔法世界，針對此案例給出兩個思路大家自行選擇
inline-block 魔法
不一步一步解釋，直接上已經(jīng)解決問題的代碼
<div class="date-wrap"> "date">14 OCT</div> "multiple">x</div> "desc">今日瞎選6篇</div> "line-top"></div> "line-bottom"></div> </div> <style type="text/css"> @font-face { font-family: century-gothic-bold; 'century-gothic-bold.ttf'); } @font-face { font-family: FZYouH_512B; 'FZYouH_512B.ttf'); } date-wrap { width: 100%; height: 60px; display: flex; relative; flex-direction: row; align-items: center; justify-content: center; text-align: center; line-height: 60px; size: 18px; font-weight: 600; } date { font-family: century-gothic-bold; } .multiple { margin: 0 10px; color: #f8ac08; } desc { size: 16px; font-family: FZYouH_512B; } top { width: 100%; height: 1px; absolute; left: 0; top: 22px; background-color: #000; } .line-bottom { width: 100%; height: 1px; absolute; left: 0; bottom: 22px; background-color: #000; } </style>效果如下
??
??
好棒啊，我只改變了后面文字的 font-size: 16px; 解決問題了耶，高興的拿給設(shè)計師，對比之后返工了，
what fuck?什么鬼?心中一萬個草泥馬(神獸)奔騰而過，仔細看!瞪大眼睛。。。。沒錯
今字的上頭出了我們的輔助線，設(shè)計師也會將手機截屏然后對照原稿做輔助線對比的哦～
解決辦法相當簡單，只需要
.desc { top: 1px; /* add */ size: 16px; font-family: FZYouH_512B; }只需要加一行，當當當當～
??
??
嗑嗑，湊合這樣吧，為什么?明明對齊了啊!再仔細看，我是認真的，沒玩大家，發(fā)現(xiàn)我們的 date 低了不到一個像素(使用 Retina 屏幕的朋友看的明顯些)，有人問一像素以內(nèi)可以調(diào)整嘛?明確告訴大家可以，之后的文章準備做解釋，這里不展開
第一種方案到這為止，上手試驗的朋友雖然沒有我的字體，你不必去下載，瀏覽器默認字體一樣的，我們講的是原理，沒必要還原我的 demo，關(guān)鍵就是 block 元素的上下 margin 調(diào)整。
提醒：這里的 margin 可以設(shè)置負值，如果負值無用自己去探索原因吧，給大家線上項目的控制臺
??
??
我這里給的就是負值，是有作用的哦，可以去 敢玩移動端主頁，記得在模擬器里查看(不然會亂成一鍋粥)，控制臺一看便知，不過多解釋啦。
vertical-align 魔法
完整代碼如下
<div class="date-wrap"> "date">14 OCT</span> "multiple">x</span> "desc">今日瞎選6篇</span> "line-top"></div> "line-bottom"></div> </div> <style type="text/css"> @font-face { font-family: century-gothic-bold; 'century-gothic-bold.ttf'); } @font-face { font-family: FZYouH_512B; 'FZYouH_512B.ttf'); } date-wrap { width: 100%; height: 60px; relative; text-align: center; line-height: 60px; size: 18px; font-weight: 600; } date { font-family: century-gothic-bold; } .multiple { color: #f8ac08; } desc { vertical-align: 1px; size: 16px; font-family: FZYouH_512B; } top { width: 100%; height: 1px; absolute; left: 0; top: 22px; background-color: #000; } .line-bottom { width: 100%; height: 1px; absolute; left: 0; bottom: 22px; background-color: #000; } </style>以上代碼運行效果和之前一摸一樣這里就不一一截圖費大家流量啦(良心前端。。。。)
和上一個方法區(qū)別在于我們行內(nèi)元素還用之前的 span 標簽。然后通過 vertical-align: 1px; 來調(diào)節(jié)垂直方向上下的位置。對這個屬性不熟悉的朋友可以去看MDN的文檔：https://developer.mozilla.org...
幾種語法如下
/* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /* Global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset;
我們用的這個 <length> values 長度單位實際應用較少，卻是行內(nèi)元素垂直對齊的黑魔法。不了解的不要緊，趕快 get 新技能
總結(jié)
兩種方案都可行，有時候不要因為一像素絞盡腦汁，找到突破口，以后誰還會怕行內(nèi)對齊了呢?
你們還有更好的想法嗎?歡迎交流
歡迎關(guān)注 orange 的 個人博客 ??http://orangexc.xyz/??
