CSS行內(nèi)對(duì)齊的黑魔法
?? ??
本文和以前的文章類(lèi)似，orange 盡量帶給大家分享實(shí)際項(xiàng)目中的坑怎么填，當(dāng)然只是提供思想，方法很多歡迎討論，還有就是對(duì)于剛上手前端的新人不是特別友好，沒(méi)關(guān)系，涉及到基礎(chǔ)知識(shí)我會(huì)對(duì)應(yīng)的進(jìn)行指引，給出鏈接或給出提示，大家可以自行 Google(百度)。
說(shuō)到行內(nèi)對(duì)齊大家可能會(huì)想到類(lèi)似水平對(duì)齊，垂直對(duì)齊總結(jié)類(lèi)型的文章，既然我們叫 黑魔法 就不會(huì)是基礎(chǔ)的對(duì)齊教程，基礎(chǔ)教程的文章好多，大家想必都知道多種方法實(shí)現(xiàn)對(duì)齊
<!--more-->
項(xiàng)目背景
還是 orange 所在公司的移動(dòng)端項(xiàng)目，上案例
截多了，咱們只看第一行的文字，算是每一天都有的 title，有人說(shuō): TMD 你在逗我?這有什么可講的誰(shuí)都會(huì)寫(xiě)好不好!
先別激動(dòng)，我當(dāng)然不是解釋這個(gè)布局怎么實(shí)現(xiàn)的，簡(jiǎn)單的例子更容易解釋問(wèn)題，繼續(xù)往下看初步實(shí)現(xiàn)的代碼，
截圖如下
?? 
細(xì)心的朋友看出問(wèn)題了，看不出也沒(méi)關(guān)系，我們加兩條輔助線嘛!
效果如下
?? 
好，相信大家現(xiàn)在一目了然存在的問(wèn)題了，那就是前面的 date 并沒(méi)有垂直居中，原因呢!解釋起來(lái)也簡(jiǎn)單
這里只需要修改一行代碼就能回答大家的疑問(wèn)
將上文對(duì)應(yīng) html 修改后，得到截圖
?? 
這個(gè)讓我不禁想起了小學(xué)英語(yǔ)作業(yè)本的四線格，哈哈，大寫(xiě)字母的確都在上方的兩個(gè)格，而小寫(xiě)上中下都有例子，單獨(dú)看 g，很好解釋上面的顯現(xiàn)了吧。
看似簡(jiǎn)單的案例還就是這么特殊，恰巧都是數(shù)字和大寫(xiě)字母，細(xì)心的還會(huì)發(fā)現(xiàn)后面的 6 也有問(wèn)題，一不留神，不居中了，設(shè)計(jì)來(lái)找你，你一臉蒙逼的說(shuō)我是按照居中寫(xiě)的啊，解決不了了?
不是的，我們接下來(lái)就是解決這個(gè)問(wèn)題的，現(xiàn)實(shí)項(xiàng)目要更復(fù)雜一些，有經(jīng)驗(yàn)的前端知道字體間的差異，個(gè)別的字體上下相差特別懸殊，
這里前后的字體是不同的，但幸好垂直方向的差異不是很大，這里我引入了項(xiàng)目原有的字體，中間的 x 其實(shí)是個(gè) svg 這里不贅述。因?yàn)榭炊枷朐賮?lái)一百個(gè)不對(duì)齊的你也能迎刃而解。
進(jìn)入真正的魔法世界，針對(duì)此案例給出兩個(gè)思路大家自行選擇
inline-block 魔法
不一步一步解釋?zhuān)苯由弦呀?jīng)解決問(wèn)題的代碼
效果如下
?? 
好棒啊，我只改變了后面文字的 font-size: 16px; 解決問(wèn)題了耶，高興的拿給設(shè)計(jì)師，對(duì)比之后返工了，
what fuck?什么鬼?心中一萬(wàn)個(gè)草泥馬(神獸)奔騰而過(guò)，仔細(xì)看!瞪大眼睛。。。。沒(méi)錯(cuò)
今字的上頭出了我們的輔助線，設(shè)計(jì)師也會(huì)將手機(jī)截屏然后對(duì)照原稿做輔助線對(duì)比的哦～
解決辦法相當(dāng)簡(jiǎn)單，只需要
只需要加一行，當(dāng)當(dāng)當(dāng)當(dāng)～
?? 
嗑嗑，湊合這樣吧，為什么?明明對(duì)齊了啊!再仔細(xì)看，我是認(rèn)真的，沒(méi)玩大家，發(fā)現(xiàn)我們的 date 低了不到一個(gè)像素(使用 Retina 屏幕的朋友看的明顯些)，有人問(wèn)一像素以?xún)?nèi)可以調(diào)整嘛?明確告訴大家可以，之后的文章準(zhǔn)備做解釋?zhuān)@里不展開(kāi)
第一種方案到這為止，上手試驗(yàn)的朋友雖然沒(méi)有我的字體，你不必去下載，瀏覽器默認(rèn)字體一樣的，我們講的是原理，沒(méi)必要還原我的 demo，關(guān)鍵就是 block 元素的上下 margin 調(diào)整。
提醒：這里的 margin 可以設(shè)置負(fù)值，如果負(fù)值無(wú)用自己去探索原因吧，給大家線上項(xiàng)目的控制臺(tái)
?? 
我這里給的就是負(fù)值，是有作用的哦，可以去 敢玩移動(dòng)端主頁(yè)，記得在模擬器里查看(不然會(huì)亂成一鍋粥)，控制臺(tái)一看便知，不過(guò)多解釋啦。
vertical-align 魔法
完整代碼如下
以上代碼運(yùn)行效果和之前一摸一樣這里就不一一截圖費(fèi)大家流量啦(良心前端。。。。)
和上一個(gè)方法區(qū)別在于我們行內(nèi)元素還用之前的 span 標(biāo)簽。然后通過(guò) vertical-align: 1px; 來(lái)調(diào)節(jié)垂直方向上下的位置。對(duì)這個(gè)屬性不熟悉的朋友可以去看MDN的文檔：https://developer.mozilla.org...
幾種語(yǔ)法如下
我們用的這個(gè) <length> values 長(zhǎng)度單位實(shí)際應(yīng)用較少，卻是行內(nèi)元素垂直對(duì)齊的黑魔法。不了解的不要緊，趕快 get 新技能
總結(jié)
兩種方案都可行，有時(shí)候不要因?yàn)橐幌袼亟g盡腦汁，找到突破口，以后誰(shuí)還會(huì)怕行內(nèi)對(duì)齊了呢?
你們還有更好的想法嗎?歡迎交流
歡迎關(guān)注 orange 的 個(gè)人博客 ??http://orangexc.xyz/??
