css如何實(shí)現(xiàn)文本圖標(biāo)對齊呢？-創(chuàng)新互聯(lián)

css如何實(shí)現(xiàn)文本圖標(biāo)對齊呢？很多人都不太了解，今天小編為了讓大家更加了解css實(shí)現(xiàn)文本圖標(biāo)對齊的方法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、海湖新網(wǎng)絡(luò)推廣、微信小程序開發(fā)、海湖新網(wǎng)絡(luò)營銷、海湖新企業(yè)策劃、海湖新品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供海湖新建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

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

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;
 }

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

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

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

常見的幾種居中方案

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

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

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

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

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

讓我們再稍做改變，將文本部分使用span標(biāo)簽包裹，并且對span使用 vertical-align: middle; 樣式對齊。會發(fā)現(xiàn)此時圖片會上移少許。

效果如下：

3、使用flex布局

display: flex;
align-items: center;

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

4、使用ex單位

ex就是小寫字母x的高度，可以用在不受字體和字號影響的內(nèi)聯(lián)元素的垂直居中對齊效果。

PS：不過這種適用于圖標(biāo)高度跟文字一致，比如字符后面加一個箭頭（點(diǎn)擊展開）的情況，就很實(shí)用。

.wrap img {
    height: 1ex;
}

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

vertical-align 屬性值可以使用數(shù)值型和百分比值，如，還是上面的基本案列：如果圖片高度是20px，文字font-size為22px時，默認(rèn)對齊是文字的基線，那么圖片會偏上2px，這時只需要將圖片向下偏移2px，就能實(shí)現(xiàn)對齊效果，而且 vertical-align 這個屬性的數(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;
        }

關(guān)于css如何實(shí)現(xiàn)文本圖標(biāo)對齊就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過小編可以保證其準(zhǔn)確性是絕對沒問題的。希望以上內(nèi)容可以對大家有一定的參考價值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

分享名稱：css如何實(shí)現(xiàn)文本圖標(biāo)對齊呢？-創(chuàng)新互聯(lián)
文章源于：http://muchs.cn/article20/deicco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、靜態(tài)網(wǎng)站、用戶體驗(yàn)、服務(wù)器托管、做網(wǎng)站、動態(tài)網(wǎng)站

廣告

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