CSS 行內對齊的黑魔法

本文和以前的文章類似，orange 儘量帶給大家分享實際專案中的坑怎麼填，當然只是提供思想，方法很多歡迎討論，還有就是對於剛上手前端的新人不是特別友好，沒關係，涉及到基礎知識我會對應的進行指引，給出連結或給出提示，大家可以自行 Google(百度)。

說到行內對齊大家可能會想到類似水平對齊，垂直對齊總結型別的文章，既然我們叫 黑魔法 就不會是基礎的對齊教程，基礎教程的文章好多，大家想必都知道多種方法實現對齊

專案背景

還是 orange 所在公司的移動端專案，上案例

截多了，我們們只看第一行的文字，算是每一天都有的 title，有人說: TMD 你在逗我？這有什麼可講的誰都會寫好不好！

先別激動，我當然不是解釋這個佈局怎麼實現的，簡單的例子更容易解釋問題，繼續往下看初步實現的程式碼，

<div class="date-wrap">
  <span class="date">14 OCT</span>
  <span class="multiple">x</span>
  <span class="desc">今日瞎選6篇</span>
</div>

<style type="text/css">
  .date-wrap {
    width: 100%;
    height: 60px;
    position: relative;

    text-align: center;
    line-height: 60px;

    font-size: 18px;
    font-weight: 600;
  }

  .multiple {
    color: #f8ac08;
  }
</style>

截圖如下

細心的朋友看出問題了，看不出也沒關係，我們加兩條輔助線嘛！

<div class="date-wrap">
  <span class="date">14 OCT</span>
  <span class="multiple">x</span>
  <span class="desc">今日瞎選6篇</span>
  <div class="line-top"></div>
  <div class="line-bottom"></div>
</div>

<style type="text/css">
  /* 這裡是前面的樣式，不重複給出 */
  .line-top {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 21px;

    background-color: #000;
  }

  .line-bottom {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 21px;

    background-color: #000;
  }
</style>

效果如下

好，相信大家現在一目瞭然存在的問題了，那就是前面的 date 並沒有垂直居中，原因呢！解釋起來也簡單

這裡只需要修改一行程式碼就能回答大家的疑問

<span class="date">14 OCT orange</span>

將上文對應 html 修改後，得到截圖

這個讓我不禁想起了小學英語作業本的四線格，哈哈，大寫字母的確都在上方的兩個格，而小寫上中下都有例子，單獨看 g，很好解釋上面的顯現了吧。

看似簡單的案例還就是這麼特殊，恰巧都是數字和大寫字母，細心的還會發現後面的 6 也有問題，一不留神，不居中了，設計來找你，你一臉蒙逼的說我是按照居中寫的啊，解決不了了？

不是的，我們接下來就是解決這個問題的，現實專案要更復雜一些，有經驗的前端知道字型間的差異，個別的字型上下相差特別懸殊，

這裡前後的字型是不同的，但幸好垂直方向的差異不是很大，這裡我引入了專案原有的字型，中間的 x 其實是個 svg 這裡不贅述。因為看懂思想再來一百個不對齊的你也能迎刃而解。

進入真正的魔法世界，針對此案例給出兩個思路大家自行選擇

inline-block 魔法

不一步一步解釋，直接上已經解決問題的程式碼

<div class="date-wrap">
  <div class="date">14 OCT</div>
  <div class="multiple">x</div>
  <div class="desc">今日瞎選6篇</div>
  <div class="line-top"></div>
  <div class="line-bottom"></div>
</div>

<style type="text/css">
  @font-face {
    font-family: century-gothic-bold;
    src: url('century-gothic-bold.ttf');
  }

  @font-face {
    font-family: FZYouH_512B;
    src: url('FZYouH_512B.ttf');
  }

  .date-wrap {
    width: 100%;
    height: 60px;
    display: flex;
    position: relative;

    flex-direction: row;
    align-items: center;
    justify-content: center;

    text-align: center;
    line-height: 60px;

    font-size: 18px;
    font-weight: 600;
  }

  .date {
    font-family: century-gothic-bold;
  }

  .multiple {
    margin: 0 10px;
    color: #f8ac08;
  }

  .desc {
    font-size: 16px;
    font-family: FZYouH_512B;
  }

  .line-top {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 22px;

    background-color: #000;
  }

  .line-bottom {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 22px;

    background-color: #000;
  }
</style>

效果如下

好棒啊，我只改變了後面文字的 font-size: 16px; 解決問題了耶，高興的拿給設計師，對比之後返工了，

what fuck？什麼鬼？心中一萬個草泥馬（神獸）奔騰而過，仔細看！瞪大眼睛。。。。沒錯

今字的上頭出了我們的輔助線，設計師也會將手機截圖然後對照原稿做輔助線對比的哦～

解決辦法相當簡單，只需要

.desc {
  margin-top: 1px;  /* add */

  font-size: 16px;
  font-family: FZYouH_512B;
}

只需要加一行，噹噹噹當～

嗑嗑，湊合這樣吧，為什麼？明明對齊了啊！再仔細看，我是認真的，沒玩大家，發現我們的 date 低了不到一個畫素（使用 Retina 螢幕的朋友看的明顯些），有人問一畫素以內可以調整嘛？明確告訴大家可以，之後的文章準備做解釋，這裡不展開

第一種方案到這為止，上手試驗的朋友雖然沒有我的字型，你不必去下載，瀏覽器預設字型一樣的，我們講的是原理，沒必要還原我的 demo，關鍵就是 block 元素的上下 margin 調整。

提醒：這裡的 margin 可以設定負值，如果負值無用自己去探索原因吧，給大家線上專案的控制檯

我這裡給的就是負值，是有作用的哦，可以去 敢玩移動端主頁，記得在模擬器裡檢視（不然會亂成一鍋粥），控制檯一看便知，不過多解釋啦。

vertical-align 魔法

完整程式碼如下

<div class="date-wrap">
  <span class="date">14 OCT</span>
  <span class="multipl)e">x</span>
  <span class="desc">今日瞎選6篇</span>
  <div class="line-top"></div>
  <div class="line-bottom"></div>
</div>

<style type="text/css">
  @font-face {
    font-family: century-gothic-bold;
    src: url('century-gothic-bold.ttf');
  }

  @font-face {
    font-family: FZYouH_512B;
    src: url('FZYouH_512B.ttf');
  }

  .date-wrap {
    width: 100%;
    height: 60px;
    position: relative;

    text-align: center;
    line-height: 60px;

    font-size: 18px;
    font-weight: 600;
  }

  .date {
    font-family: century-gothic-bold;
  }

  .multiple {
    color: #f8ac08;
  }

  .desc {
    vertical-align: 1px;

    font-size: 16px;
    font-family: FZYouH_512B;
  }

  .line-top {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 22px;

    background-color: #000;
  }

  .line-bottom {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 22px;

    background-color: #000;
  }
</style>

以上程式碼執行效果和之前一摸一樣這裡就不一一截圖費大家流量啦（良心前端。。。。）

和上一個方法區別在於我們行內元素還用之前的 span 標籤。然後通過 vertical-align: 1px; 來調節垂直方向上下的位置。對這個屬性不熟悉的朋友可以去看MDN的文件：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

幾種語法如下

/* 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 長度單位實際應用較少，卻是行內元素垂直對齊的黑魔法。不瞭解的不要緊，趕快 get 新技能

總結

兩種方案都可行，有時候不要因為一畫素絞盡腦汁，找到突破口，以後誰還會怕行內對齊了呢？

你們還有更好的想法嗎？歡迎交流