資訊專欄INFORMATION COLUMN
摘要：允許指定負(fù)長(zhǎng)度值和百分比值。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。元素基線超過(guò)父元素的基線指定高度。取值元素與同行單元格的基線對(duì)齊。單元格垂直居中。單元格的內(nèi)邊距的下邊緣與行的底端對(duì)齊。
vertical-align的理解：
設(shè)置元素的垂直對(duì)齊方式，是以父元素作為參照的。
多用于圖片和文字的并排對(duì)齊。
適用于內(nèi)聯(lián)元素，內(nèi)聯(lián)塊元素和表單元素。
display:inline;
display:inline-block;
display:table;
display:table-cell;
瀏覽器支持所有瀏覽器都支持 vertical-align 屬性。
允許指定負(fù)長(zhǎng)度值和百分比值。
在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。
默認(rèn)值：baseline
繼承性：無(wú)
JS語(yǔ)法：
object.style.verticalAlign="bottom"
基線下面紅線就是基線。
取值baseline
默認(rèn)。元素基線與父元素的基線對(duì)齊。
一些 可替換元素，比如 `` ， HTML標(biāo)準(zhǔn)沒(méi)有說(shuō)明它的基線，這意味著使用這個(gè)關(guān)鍵字，各瀏覽器表現(xiàn)可能不一樣。
sub
元素基線與父元素字體的下標(biāo)基線對(duì)齊。
super
元素基線與父元素字體的上標(biāo)基線對(duì)齊。
text-top
元素頂端與父元素字體的頂端對(duì)齊。
text-bottom
元素底端與父元素字體的底端對(duì)齊。
middle
元素中線與父元素的小寫(xiě)x中線對(duì)齊。把此元素放置在父元素的中部。
元素基線超過(guò)父元素的基線指定高度?？梢匀∝?fù)值。
同
用百分比指定由基線算起的偏移量。
下面兩個(gè)屬性不像上面的屬性相對(duì)于父元素，而是相對(duì)于整行：
top
元素及其后代的頂端與整行的頂端對(duì)齊。
bottom
元素及其后代的底端與整行的底端對(duì)齊。
如果元素沒(méi)有基線baseline，則以它的外邊距的下邊緣為基線。
取值 (table-cell元素)
baseline (and sub, super, text-top, text-bottom,
與同行單元格的基線對(duì)齊。
top
單元格的內(nèi)邊距的上邊緣與行的頂端對(duì)齊。
middle
單元格垂直居中。
bottom
單元格的內(nèi)邊距的下邊緣與行的底端對(duì)齊。
可以取負(fù)值。
例子
vertical-align
參考內(nèi)容Xbaseline基線對(duì)齊
參考內(nèi)容Xsub下標(biāo)對(duì)齊
參考內(nèi)容Xsuper上標(biāo)對(duì)齊
參考內(nèi)容Xtop要對(duì)齊的內(nèi)容
參考內(nèi)容Xmiddle要對(duì)齊的內(nèi)容
參考內(nèi)容Xbottom要對(duì)齊的內(nèi)容
參考內(nèi)容Xtext-top要對(duì)齊的內(nèi)容
參考內(nèi)容Xtext-bottom要對(duì)齊的內(nèi)容
參考內(nèi)容Xlength偏移量對(duì)齊
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116158.html
摘要：關(guān)于的條參考線以及。關(guān)于和之間的關(guān)系。目標(biāo)元素的的垂直平分線，與父元素內(nèi)匿名的對(duì)齊。垂直平分線，這個(gè)容易理解。要比這些字母的頂端再高一些。 前言 關(guān)于 vertical-align，我們很容易想到，這不就是告訴我們?cè)卦诳v向上和什么對(duì)齊的屬性嗎？而事實(shí)上，正是這種寬泛的說(shuō)法導(dǎo)致了我們對(duì)其的理解存在許多不確定性。事實(shí)上，對(duì)齊這兩個(gè)字其實(shí)牽涉到4個(gè)對(duì)象：即哪個(gè)對(duì)象的哪條線，與哪個(gè)對(duì)象的哪條...
摘要：內(nèi)聯(lián)元素的外邊緣與該行高的頂部和底部邊緣對(duì)齊。如果行高小于字體的高度，不會(huì)受影響，但會(huì)對(duì)齊文本邊界。紅線表示邊界，藍(lán)線表示，黃色為，白色為區(qū)域，綠色為區(qū)域。的確定規(guī)則元素的是它的第一行的。 前言 為什么寫(xiě)這篇總結(jié)？最近在文字圖標(biāo)垂直對(duì)齊上用到css的vertical-align屬性，但是有的時(shí)候有效，有的時(shí)候無(wú)效，常常疑惑不解，反思這是自己對(duì)vertical-align的基本認(rèn)知不夠造...
摘要：張?chǎng)涡窭蠋熢谖恼挛覍?duì)的一些理解與認(rèn)識(shí)一中提到屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經(jīng)過(guò)摸索測(cè)試，才對(duì)這句話有種豁然開(kāi)朗的感覺(jué)。匿名元素我是一段卡哇伊的文字。 張?chǎng)涡窭蠋熢谖恼隆段覍?duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）》中提到： vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通...
摘要：張?chǎng)涡窭蠋熢谖恼挛覍?duì)的一些理解與認(rèn)識(shí)一中提到屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通?？吹降呐c后面的文字垂直居中顯示那都是假象經(jīng)過(guò)摸索測(cè)試，才對(duì)這句話有種豁然開(kāi)朗的感覺(jué)。匿名元素我是一段卡哇伊的文字。 張?chǎng)涡窭蠋熢谖恼隆段覍?duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）》中提到： vertical-align:middle屬性的表現(xiàn)與否，僅僅與其父標(biāo)簽有關(guān)，至于我們通...
摘要：部分樣式代碼總結(jié)因?yàn)橛玫牟欢嗥渌麑?duì)齊方式并沒(méi)有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動(dòng) float、position:absolute、 來(lái)解決, 不過(guò)文檔流都會(huì)受到影響。筆者常用的是 flex, 用起來(lái)順手, 有些地方用起來(lái)感覺(jué)小題大做, 于是就來(lái)探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...
閱讀 1896·2019-08-30 15:53
閱讀 3221·2019-08-30 15:44
閱讀 2823·2019-08-26 13:31
閱讀 1972·2019-08-26 12:10
閱讀 827·2019-08-26 11:01
閱讀 2152·2019-08-23 15:32
閱讀 1612·2019-08-23 13:43
閱讀 2564·2019-08-23 11:58
