CSS中圖片於文本的基準對齊設定

來源:互聯網
上載者:User

文字旁邊搭配圖片時,發現圖片比文字靠上,原來預設的情況是圖片頂對齊而文字底對齊,通過設定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="http://images.cnblogs.com/New_16_blue.gif" style="vertical-align:text-bottom;"/>目標任務</span>

實現圖片於文字的底端對齊


 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.