這篇文章主要介紹css如何實現(xiàn)文本圖標對齊,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)公司自2013年起,先為寧縣等服務建站,寧縣等地企業(yè),進行企業(yè)商務咨詢服務。為寧縣企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
開發(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; }
未使用對齊方式的效果如下:
默認的對齊方式是 baseline
,也就是x字母的最下面那條線。
這也就回答了第一個問題,瀏覽器的圖片跟文字未額外設置時是基于小寫字母x的下邊緣為基準,也就是 vertical-align:baseline;
。
常見的幾種居中方案
1、使用 vertical-align
居中對齊方式
.wrap { vertical-align: middle; } .wrap img { vertical-align: middle; }
當我們使用常用的 vertical-align
對齊文本和圖片時,其實也是有一定的偏差的,如下圖:
vertical-align
的middle值實際上是相對于小寫字母x的一半高度來說的,所以圖片會跟x的中間開始對齊,但是其他字符譬如S、中文,就會發(fā)現(xiàn)無論如何都會出現(xiàn)稍許偏差,圖片會相對而言偏下。
2、使用 vertical-align
同時使用span包裹文本
讓我們再稍做改變,將文本部分使用span標簽包裹,并且對span使用 vertical-align: middle;
樣式對齊。會發(fā)現(xiàn)此時圖片會上移少許。效果如下:
3、使用flex布局
display: flex; align-items: center;
不過就算是flex布局,有時候也會出現(xiàn)一點兒偏差,比如:圖片尺寸為偶數(shù)、字體font-size為偶數(shù),line-height為偶數(shù)時對齊;奇數(shù)時偏上1px。
具體參考可查看 iconSize
、 fontSize
和 lineHeight
之間奇偶關系 對齊誤差
4、使用ex單位
這種方式是從張鑫旭老師的《css世界》中看到的,ex就是小寫字母x的高度,可以用在不受字體和字號影響的內(nèi)聯(lián)元素的垂直居中對齊效果,PS:不過這種適用于圖標高度跟文字一致,比如字符后面加一個箭頭(點擊展開)的情況,就很實用。
.wrap img { height: 1ex; }
5、vertical-align 數(shù)值方式的使用
同樣也是在張鑫旭老師的《css世界》中看到的, vertical-align
屬性值可以使用數(shù)值型和百分比值,
如,還是上面的基本案列:如果圖片高度是20px,文字font-size為22p
x時,默認對齊是文字的基線,那么圖片會偏上2px,這時只需要將圖片向下偏移2px,就能實現(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; }
以上是“css如何實現(xiàn)文本圖標對齊”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站題目:css如何實現(xiàn)文本圖標對齊
本文鏈接:http://muchs.cn/article32/piedsc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站建設、、商城網(wǎng)站、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)