這篇文章主要介紹css如何實(shí)現(xiàn)文本圖標(biāo)對(duì)齊，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司自2013年起，先為寧縣等服務(wù)建站，寧縣等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為寧縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

開(kāi)發(fā)中遇見(jiàn)圖片跟文字放在一行顯示是最常見(jiàn)不過(guò)的了，兩個(gè)行內(nèi)元素的對(duì)齊通常也是最令人頭疼，有時(shí)候明明使用了最常用的對(duì)齊方法，卻總還是有些許偏差，先來(lái)看一個(gè)最基本的示例：

html部分：

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xx測(cè)試對(duì)齊Style-
</div>

css部分：

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

未使用對(duì)齊方式的效果如下：

 

默認(rèn)的對(duì)齊方式是 baseline ，也就是x字母的最下面那條線。

這也就回答了第一個(gè)問(wèn)題，瀏覽器的圖片跟文字未額外設(shè)置時(shí)是基于小寫(xiě)字母x的下邊緣為基準(zhǔn)，也就是 vertical-align:baseline; 。

常見(jiàn)的幾種居中方案

1、使用 vertical-align 居中對(duì)齊方式

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}

當(dāng)我們使用常用的 vertical-align 對(duì)齊文本和圖片時(shí)，其實(shí)也是有一定的偏差的，如下圖：

 

vertical-align 的middle值實(shí)際上是相對(duì)于小寫(xiě)字母x的一半高度來(lái)說(shuō)的，所以圖片會(huì)跟x的中間開(kāi)始對(duì)齊，但是其他字符譬如S、中文，就會(huì)發(fā)現(xiàn)無(wú)論如何都會(huì)出現(xiàn)稍許偏差，圖片會(huì)相對(duì)而言偏下。

2、使用 vertical-align 同時(shí)使用span包裹文本

讓我們?cè)偕宰龈淖儯瑢⑽谋静糠质褂胹pan標(biāo)簽包裹，并且對(duì)span使用 vertical-align: middle; 樣式對(duì)齊。會(huì)發(fā)現(xiàn)此時(shí)圖片會(huì)上移少許。效果如下：

3、使用flex布局

display: flex;
align-items: center;

不過(guò)就算是flex布局，有時(shí)候也會(huì)出現(xiàn)一點(diǎn)兒偏差，比如：圖片尺寸為偶數(shù)、字體font-size為偶數(shù)，line-height為偶數(shù)時(shí)對(duì)齊；奇數(shù)時(shí)偏上1px。

具體參考可查看 iconSize 、 fontSize 和 lineHeight 之間奇偶關(guān)系 對(duì)齊誤差

4、使用ex單位

這種方式是從張?chǎng)涡窭蠋煹摹禼ss世界》中看到的，ex就是小寫(xiě)字母x的高度，可以用在不受字體和字號(hào)影響的內(nèi)聯(lián)元素的垂直居中對(duì)齊效果，PS：不過(guò)這種適用于圖標(biāo)高度跟文字一致，比如字符后面加一個(gè)箭頭（點(diǎn)擊展開(kāi)）的情況，就很實(shí)用。

.wrap img {
    height: 1ex;
}

5、vertical-align 數(shù)值方式的使用

同樣也是在張?chǎng)涡窭蠋煹摹禼ss世界》中看到的， vertical-align 屬性值可以使用數(shù)值型和百分比值，

如，還是上面的基本案列：如果圖片高度是20px，文字font-size為22p

x時(shí)，默認(rèn)對(duì)齊是文字的基線，那么圖片會(huì)偏上2px，這時(shí)只需要將圖片向下偏移2px，就能實(shí)現(xiàn)對(duì)齊效果，而且 vertical-align 這個(gè)屬性的數(shù)值型具有很好的兼容性。

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

以上是“css如何實(shí)現(xiàn)文本圖標(biāo)對(duì)齊”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：css如何實(shí)現(xiàn)文本圖標(biāo)對(duì)齊
本文鏈接：http://www.chinadenli.net/article32/piedsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、、商城網(wǎng)站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)