首頁 > web前端 > css教學 > css實作文字圖示對齊的方法

css實作文字圖示對齊的方法

王林
發布: 2020-04-20 09:12:54
轉載
3039 人瀏覽過

css實作文字圖示對齊的方法

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

html部分:

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xx测试对齐Style-
</div>
登入後複製

推薦教學:CSS入門教學

css部分:

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

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

css實作文字圖示對齊的方法

##預設的對齊方式是 baseline ,也就是x字母的最下面那條線。

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

常見的幾個居中方案

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

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}
登入後複製

當我們使用常用的 vertical-align 對齊文字和圖片時,其實也是有一定的偏差的,如下圖:

css實作文字圖示對齊的方法

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

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

讓我們再稍做改變,將文字部分使用span標籤包裹,並且對span使用 vertical-align: middle; 樣式對齊。會發現此時圖片會上移少許。

效果如下:

css實作文字圖示對齊的方法

3、使用flex佈局

display: flex;
align-items: center;
登入後複製

css實作文字圖示對齊的方法

不過就算是flex佈局,有時候也會出現一點兒偏差,例如:圖片尺寸為偶數、字體font-size為偶數,line-height為偶數時對齊;奇數時偏上1px。

4、使用ex單位

ex就是小寫字母x的高度,可以用在不受字體和字號影響的內聯元素的垂直居中對齊效果。

PS:不過這種適用於圖示高度跟文字一致,例如字元後面加上箭頭(點擊展開)的情況,就很實用。

.wrap img {
    height: 1ex;
}
登入後複製

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

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;
        }
登入後複製
相關影片教學推薦:

css影片教學
#

以上是css實作文字圖示對齊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板