前端文字與圖片的對齊


實例如:

<p>

測試文字<img src="XXX" />

</p>

 

這時我們想要排版時,總會遇見圖片與文字的對齊問題

這時其實只要將img加上vertical-align這個CSS樣式即可。如

img

{

vertical-align:text-top;

}

從W3C上查到的可能的值有

 

描述

baseline

默認。元素放置在父元素的基線上。

sub

垂直對齊文本的下標。

super

垂直對齊文本的上標

top

把元素的頂端與行中最高元素的頂端對齊

text-top

把元素的頂端與父元素字體的頂端對齊

middle

把此元素放置在父元素的中部。

bottom

把元素的頂端與行中最低的元素的頂端對齊。

text-bottom

把元素的底端與父元素字體的底端對齊。

length

 

%

使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。

inherit

規定應該從父元素繼承 vertical-align 屬性的值。


免責聲明!

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



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