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