不同大小的字體底部對齊


不同font-size的字體會出現上下偏差,這是一個蠻令人頭疼的問題。特別是中文字體(英文字體不會出現這種問題)。

<style>
    b {  font-size:24px; }
    span {  font-size:50px; }
</style>

<body>
<div><b>Hello<span>World</span></b></div>
<div><b>Hello<span>578</span></b></div>
<div><b>爆款<span>578</span></b></div>
<div><b>爆款<span>價格</span></b></div>
</body>

 下面是分別出現的三種情況:

英文字體還好,可中文出現了上下偏差。設置行高也不起作用。現在推薦下面這個方法來處理。

<style>
b { position:absolute; font-size:24px; }
span { position:absolute; font-size:50px; top:-25px;  }

</style>
<body>
//這里注意<span>標簽是放在<b>標簽里面
<div><b>爆款<span>578</span></b></div>
</body>

 

這里通過絕對定位來使文字偏移回來。只需要控制span標簽的top值,就可以讓文字底部對齊。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM