記錄文本圖標對齊的幾種解決方案

常見的對齊問題：

1. 瀏覽器是基於什麼對齊圖標和文本的？
2. 爲何明明使用了 flex或vertical-align，圖標仍是看起來差了 1 像素沒對齊？

文字圖標佈局

開發中碰見圖片跟文字放在一行顯示是最多見不過的了，兩個行內元素的對齊一般也是最使人頭疼，有時候明明使用了最經常使用的對齊方法，卻總仍是有些許誤差，先來看一個最基本的示例：

html部分：

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xx測試對齊Style-
</div>
複製代碼

css部分：

.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }
複製代碼

未使用對齊方式的效果以下：

默認的對齊方式是baseline，也就是x字母的最下面那條線。

這也就回答了第一個問題，瀏覽器的圖片跟文字未額外設置時是基於小寫字母x的下邊緣爲基準，也就是vertical-align:baseline;。

怎麼讓圖片跟文字居中對齊呢，下面來看幾種常見的解決方案。

常見的幾種居中方案

一、使用vertical-align 居中對齊方式

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}
複製代碼

當咱們使用經常使用的vertical-align對齊文本和圖片時，其實也是有必定的誤差的，以下圖：

vertical-align的middle值其實是相對於小寫字母x的一半高度來講的，因此圖片會跟x的中間開始對齊，可是其餘字符譬如S、中文，就會發現不管如何都會出現稍許誤差，圖片會相對而言偏下。

二、使用vertical-align 同時使用span包裹文本

讓咱們再稍作改變，將文本部分使用span標籤包裹，而且對span使用vertical-align: middle;樣式對齊。會發現此時圖片會上移少量。 效果以下：

其實嚴格來講，第一種方式不算是真正的徹底發揮了vertical-align的做用，我經常按第一種方式來實現對齊效果，由於懶得再寫一層span標籤，但實際上咱們能夠再嘗試把vertical-align: middle;去掉，會發現跟只在img標籤上使用vertical-align: middle;的效果是同樣的，也就是說，外層的div上設置vertical-align並無做用。

這是由於，vertical-align起做用是有前提條件的，只能應用於內聯元素以及display值爲tabale-cell的元素，且vertical-align不可繼承。

三、使用flex佈局

display: flex;
align-items: center;
複製代碼

不過就算是flex佈局，有時候也會出現一點兒誤差，好比：圖片尺寸爲偶數、字體font-size爲偶數，line-height爲偶數時對齊；奇數時偏上1px。

具體參考可查看 iconSize、fontSize 和 lineHeight 之間奇偶關係 對齊偏差

四、使用ex單位

這種方式是從張鑫旭老師的《css世界》中看到的，ex就是小寫字母x的高度，能夠用在不受字體和字號影響的內聯元素的垂直居中對齊效果，PS：不過這種適用於圖標高度跟文字一致，好比字符後面加一個箭頭（點擊展開）的狀況，就很實用。

.wrap img {
    height: 1ex;
}
複製代碼

​

五、vertical-align 數值方式的使用

一樣也是在張鑫旭老師的《css世界》中看到的，vertical-align屬性值可使用數值型和百分比值，

如，仍是上面的基本案列：若是圖片高度是20px，文字font-size爲22px時，默認對齊是文字的基線，那麼圖片會偏上2px，這時只須要將圖片向下偏移2px，就能實現對齊效果，並且vertical-align這個屬性的數值型具備很好的兼容性。

.wrap {
            width: 100%;
            padding-top: 200px;
            text-align: center;
            margin: 20px auto;
            font-size: 22px;
            height: 40px;
            
        }
        .wrap img {
            width: 20px;
            vertical-align: -2px;
        }
複製代碼