1. 程式人生 > 實用技巧 >css中圖片於文字的基線對齊與vertical-align屬性設定

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>