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

　　設置各對象的vertical-align屬性，屬性說明：
　　baseline－將支持valign特性的對象的內容與基線對齊
　　sub－垂直對齊文本的下標
　　super－垂直對齊文本的上標
　　top－將支持valign特性的對象的內容與對象頂端對齊
　　text-top－將支持valign特性的對象的文本與對象頂端對齊
　　middle－將支持valign特性的對象的內容與對象中部對齊
　　bottom－將支持valign特性的對象的文本與對象底端對齊
　　text-bottom－將支持valign特性的對象的文本與對象頂端對齊

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

<div><div>文字與圖片對齊方式<span style="vertical-align:middle;"><img src="b-grade.png"></span></div><br><div>文字與圖片對齊方式<span style="vertical-align:baseline"><img src="b-grade.png"></span></div><br><div>文字與圖片對齊方式<img src="b-grade.png"></div><br><div>文字與圖片對齊方式<span style="vertical-align:bottom"><img src="b-grade.png"></span></div><br><div>文字與圖片對齊方式<span style="vertical-align:sub"><img src="b-grade.png"></span></div><br><div>文字與圖片對齊方式<span style="vertical-align:super"><img src="b-grade.png"></span></div><br><div>文字與圖片對齊方式<span style="vertical-align:text-bottom"><img src="b-grade.png"></span></div><br><div>文字與圖片對齊方式<span style="vertical-align:text-top"><img src="b-grade.png"></span></div><br><div>文字與圖片對齊方式<span style="vertical-align:top"><img src="b-grade.png"></span></div> </div>

?

總結

以上是生活随笔為你收集整理的CSS 之 控制图片与文字对齐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。