文字旁邊搭配圖片時(shí)，發(fā)現(xiàn)圖片比文字靠上，原來默認(rèn)的情況是圖片頂對(duì)齊而文字底對(duì)齊，通過設(shè)置css屬性可以使得圖片與文字對(duì)齊。

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

　　在此設(shè)置為text-bottom即可實(shí)現(xiàn)圖片與文字位于同一水平線上：

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。