css中圖片于文本的基線對(duì)齊與vertical-align屬性設(shè)置
發(fā)布時(shí)間：2013-04-02 15:22:36 作者：佚名 
我要評(píng)論
我要評(píng)論默認(rèn)的情況是圖片頂對(duì)齊而文字底對(duì)齊，通過(guò)設(shè)置css屬性可以使得圖片與文字對(duì)齊，接下來(lái)為大家詳細(xì)介紹下設(shè)置各對(duì)象的vertical-align屬性，感興趣的朋友可以參考下哈
文字旁邊搭配圖片時(shí)，發(fā)現(xiàn)圖片比文字靠上，原來(lái)默認(rèn)的情況是圖片頂對(duì)齊而文字底對(duì)齊，通過(guò)設(shè)置css屬性可以使得圖片與文字對(duì)齊。
設(shè)置各對(duì)象的vertical-align屬性，屬性說(shuō)明：
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)圖片與文字位于同一水平線上，好看多了
如下：其他自己改
<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目標(biāo)任務(wù)</span>
實(shí)現(xiàn)圖片于文字的底端對(duì)齊
設(shè)置各對(duì)象的vertical-align屬性，屬性說(shuō)明：
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)圖片與文字位于同一水平線上，好看多了
如下：其他自己改
復(fù)制代碼
代碼如下:<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目標(biāo)任務(wù)</span>
實(shí)現(xiàn)圖片于文字的底端對(duì)齊
相關(guān)文章
深入理解CSS中的vertical-align屬性和基線問(wèn)題
這篇文章主要介紹了深入理解CSS中的vertical-align屬性和基線問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考2020-04-03- 本文向大家介紹一下CSS vertical-align 屬性的用法，該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。2014-10-22
css 垂直對(duì)齊 css中vertical-align屬性(垂直對(duì)齊)的使用說(shuō)明
這兩天寫個(gè)頁(yè)面css的時(shí)候用到了vertical-align屬性，使用過(guò)程中踩到了坑,因此整理了一些，以備不時(shí)之需，感興趣的朋友可以了解下哦2013-01-09CSS實(shí)例:vertical-align屬性讓網(wǎng)頁(yè)層居中
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：CSS實(shí)例:vertical-align屬性讓網(wǎng)頁(yè)層居中. vertical-align屬性使網(wǎng)頁(yè)層居中 網(wǎng)頁(yè)源代碼如下： <html> <2009-04-02css vertical-align屬性詳細(xì)圖解分析
vertical-align屬性詳細(xì)分析 最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性，結(jié)果讓我大吃一驚，這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同2009-02-10
CSS中的vertical-align用于設(shè)置行內(nèi)塊或者行內(nèi)元素行內(nèi)元素的對(duì)齊方式，使用過(guò)程中的坑很多，本文就詳細(xì)的介紹一下vertical-align屬性的具體使用方法，感興趣的可以了解一2023-05-11
