資訊專欄INFORMATION COLUMN
摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個(gè)的高度為，位置處于中間。
vertical-align的值
線類：baseline（默認(rèn)）, top, bottom, middle
文字類：text-top, text-bottom
上標(biāo)下標(biāo)類：sub, super
數(shù)值：1px, 1em - 在baseline對(duì)齊的基礎(chǔ)上上下偏移一定數(shù)值
百分比：相對(duì)于line-height計(jì)算
vertical-align起作用的前提只作用于inline水平元素以及"table-cell"元素
注意：float和position: absolute會(huì)使元素塊狀化
vertical-align與line-heightinline元素都有vertical-align和line-height，默認(rèn)基線對(duì)齊
inline元素對(duì)齊https://codepen.io/curlywater...
上例中，inline元素默認(rèn)基線對(duì)齊，并未和容器貼合；
設(shè)置vertical-align為top，這時(shí)不再與基線對(duì)齊，和容器貼合；
設(shè)置line-height為0，但基線與底邊重合，仍舊是基線對(duì)齊，此時(shí)元素和容器貼合。
對(duì)齊方式總結(jié)：
清除vertical-align
修改vertical-align值
元素block化
line-height為0
設(shè)置line-height為0
line-height為數(shù)值的情況下，可以設(shè)置font-size為0
inline-block基線inline-block元素的基線是inline-block內(nèi)最后一個(gè)line box的基線；如果inline-block內(nèi)沒有l(wèi)ine box或者其本身的overflow不為visible，基線是自身的margin底邊緣。
https://codepen.io/curlywater...
上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為line box的基線；
將右邊盒子的行高設(shè)置為0，即baseline這個(gè)line box的高度為0，位置處于content area中間。
inline|inline-block元素：元素底部和父級(jí)底部對(duì)齊
table-cell元素：底padding邊緣和table-row底部對(duì)齊，多余部分padding填充
inline|inline-block元素：元素頂部和父級(jí)頂部對(duì)齊
table-cell元素：頂padding邊緣和table-row頂部對(duì)齊，多余部分padding填充
inline|inline-block元素：元素的垂直中心點(diǎn)和父元素基線上的1/2 x 高度處對(duì)齊，也就是x的中心點(diǎn)
使用vertical-align:middle只是近似垂直居中，因字符有下沉的特性，所以x的中心點(diǎn)是低于容器實(shí)際中心線的，字體較小的情況下肉眼看不出區(qū)別而已
https://codepen.io/curlywater...
table-cell元素：table-cell元素的高度有table-row中最高的那一個(gè)單元格決定，內(nèi)容未撐滿高度時(shí)，使用padding填充
文本類屬性值text-top：元素頂部和父級(jí)content area的頂部對(duì)齊
text-bottom：元素底部和父級(jí)content area的底部對(duì)齊
只與父級(jí)的font-size有關(guān)，與父級(jí)line-height無關(guān)，與兄弟元素的line-height無關(guān)
上標(biāo)下標(biāo)類屬性值super：提高元素的基線到父級(jí)的上標(biāo)基線位置
sub：降低元素的基線到父級(jí)的下標(biāo)基線位置
關(guān)注自身和父級(jí)，前后元素并沒有影響
vertical-align的應(yīng)用多行文字垂直居中
https://codepen.io/curlywater...
容器指定高度
需要居中的行內(nèi)元素設(shè)置display: inline-block; vertical-align: middle
加一個(gè)與容器高度相同，vertical-align: middle; display: inline-block輔助元素
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117044.html
摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時(shí)候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達(dá)到看似居中的效果?？梢缘玫浇Y(jié)論和設(shè)置一致，并非是完全垂直，除非為。 張?chǎng)涡竦腃SS深入理解之line-height學(xué)習(xí)筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...
摘要：內(nèi)聯(lián)元素的外邊緣與該行高的頂部和底部邊緣對(duì)齊。如果行高小于字體的高度，不會(huì)受影響，但會(huì)對(duì)齊文本邊界。紅線表示邊界，藍(lán)線表示，黃色為，白色為區(qū)域，綠色為區(qū)域。的確定規(guī)則元素的是它的第一行的。 前言 為什么寫這篇總結(jié)？最近在文字圖標(biāo)垂直對(duì)齊上用到css的vertical-align屬性，但是有的時(shí)候有效，有的時(shí)候無效，常常疑惑不解，反思這是自己對(duì)vertical-align的基本認(rèn)知不夠造...
摘要：但實(shí)質(zhì)上，只要是內(nèi)聯(lián)元素，這兩個(gè)元素都會(huì)同時(shí)在起作用。而解決方案可以有以下幾種元素不使用基線對(duì)齊，可以改為對(duì)齊元素塊狀化設(shè)置為設(shè)置為總結(jié)講解了的各類屬性值及其效果起作用的前提是內(nèi)聯(lián)元素與都是同時(shí)作用在內(nèi)聯(lián)元素上的 前言 vertical-align用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對(duì)齊方式。也就是說，對(duì)于塊級(jí)元素，vertical-align...
摘要：前言之前在寫網(wǎng)頁(yè)的時(shí)候有一個(gè)展示圖片的需求我使用一個(gè)包裹一個(gè)但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問題仔細(xì)看圖片和之間有間隙。正文指定了行內(nèi)元素或表格單元格元素的垂直對(duì)齊方式摘錄自。設(shè)置父元素字體大小為所用的值是無單位數(shù)值乘以元素的。 前言 之前在寫網(wǎng)頁(yè)的時(shí)候有一個(gè)展示圖片的需求,我使用一個(gè)div包裹一個(gè)img,但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問題,showImg(https://s...
閱讀 1241·2023-04-25 15:53
閱讀 2110·2021-11-19 09:40
閱讀 3501·2021-10-11 10:59
閱讀 2077·2019-08-30 15:55
閱讀 1965·2019-08-30 15:54
閱讀 2311·2019-08-29 13:03
閱讀 2764·2019-08-28 18:17
閱讀 1518·2019-08-27 10:51
