css中圖片於文本的基線對齊與vertical-align屬性設置


css中圖片於文本的基線對齊與vertical-align屬性設置

文字旁邊搭配圖片時,發現圖片比文字靠上,原來默認的情況是圖片頂對齊而文字底對齊,通過設置css屬性可以使得圖片與文字對齊。

設置各對象的vertical-align屬性,屬性說明:

baseline-將支持valign特性的對象的內容與基線對齊
sub-垂直對齊文本的下標
super-垂直對齊文本的上標
top-將支持valign特性的對象的內容與對象頂端對齊
text-top-將支持valign特性的對象的文本與對象頂端對齊
middle-將支持valign特性的對象的內容與對象中部對齊
bottom-將支持valign特性的對象的文本與對象底端對齊
text-bottom-將支持valign特性的對象的文本與對象頂端對齊

在此設置為text-bottom即可實現圖片與文字位於同一水平線上

<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目標任務</span>


免責聲明!

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



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