css - 垂直对齐
作者:互联网
css - 垂直对齐
非原生行内块
为了方便叙述,我们把转换为行内块的元素称为非原生行内块元素
单行/多行元素
在学习垂直对齐前,需要先把在一行上显示的元素分出两个概念,一个是单行元素,另一个是多行元素。单行元素有:input、button、span、a等,多行元素有:非原生的行内块、textarea、img等。而我们知道元素的顶线就是其顶部、底线是其底部,中线是其中部,但其基线在css中却有奇怪的解释。
单行元素的基线
1.单行输入框input:基线=在输入框输入的文本的基线
2.按钮(input按钮或button):基线=按钮文本的基线
3.span等行内元素:基线=文本的基线
4.纯文本:基线=文本的基线
多行元素的基线
1.图片:基线=底线=底部
1.多行输入框textarea:基线=底线=底部
2.没有包含内容的非原生行内块元素(如div、span):基线=底线=底部,
3.包含了内容的非原生行内块元素(如div、span):基线=其包含的最后一行的内容的基线,如果你希望它的基线是自身的底线,可以设其overflow:hidden
从以上我们可以得知,单行元素的基线是其文本的基线,而多行元素的基线是其底线,而非原生行内块如果包含内容,则其基线是其最后一行内容的基线
line box的四条线
一行就是一个line box,而一行上多个并列的元素,每个元素都称为inline box。line box也有四条线:顶线=顶部,中线=隐形x的中线,基线=隐形x的底线(隐形x的基线=其底线),底线=一行上最高的那个inline box底线。
隐形x
隐形x的概念属于伪造,但它有助于理解vertical-align的对齐模式。
假如有一个高500px的div,则它可能具有多行或只有一行,这取决于设计图,无论如何,最低它也具有一行。而每一个行都是一个line box,每个line box都有一个隐形x。而vertical-align的对齐方式都是以line box的四条线进行垂直偏移的,所以先暂且记住line box的四条线和隐形x的概念才能理解后面的讲解
隐形的x不由任何子html标签包含。你也可以手动向line box插入一个纯文字小写x,用这个x来试验vertical-align的各个值的效果。
vertical-align的应用方式
vertical-align有一些非常迷惑人的特点,所以很多人在使用这个属性的时候会发现超多的意外情况。比如你为一行上的img设置了vertical-align:middle,你会发现这个设置对其它在一行上的元素居然也有效。实际上你只需要记住,vertical-align:baseline是每个元素都具备的默认属性,如果你只是为一行上的某一个元素设置了非baseline的vertical-align,那么只有这一个元素会应用这个新的垂直对齐特性,而一行上的其他元素应用的依然是baseline!如果这一点没搞清楚,你会被迷惑得抓狂。请记住,默认baseline!你可以手动覆盖这个属性值,但只有明确设置了新特性值的元素才会应用新的垂直对齐方式,其它元素并不变化,依然是baseline。
vertical-align属性值
取值:baseline 默认 | px | % | top | middle | bottom | super | sub | text-top | text-bottom
设置给:inline box
继承性:无
作用:设置某个inline box相对于包含它的line box的四条线的垂直对齐方式,所以,当一行当中出现纯文本、行内、行内块元素时,你就要想到该行的line box与这些元素之间存在默认的基线对齐。垂直对齐与作为一行上的块元素无关,块元素是独占一行,不存在垂直对齐。取值:baseline
baseline:以line box的基线为参照与自身的基线对齐
取值:px | em | rem ……
px/em/rem:以line box的基线为参照进行上下偏移,可以把基线看做0刻度线,向上偏移取正数,向下偏移取负数
取值:%
%:以line box的基线为参照进行上下偏移,将当前元素的行高*%,正百分比向上偏移,负百分比向下偏移
取值:top(顶线) | bottom(底线)| middle(中线)
top/bottom/middle:top:以line box的顶线为参照与自身的顶线对齐(line box的顶部)、middle:以隐形x的中线为参照与自身的中线对齐(当存在行高时,隐形x的中线会下沉到line box的中线的下面,行高越高,下沉越明显,这个情况被称为字符下沉)、bottom:以line box的底线为参照与自身的底线对齐(line box的底线是在它里面最高的那个inline box的底线)
下图中的黄色div设置了vertical-align:top,黄色div以line box的顶线与自身的顶线对齐
下图中的黄色div设置了vertical-align:middle,黄色div以隐形x的中线与自身的中线对齐
下图中的黄色div设置了vertical-align:bottom,一行黄色div最高,它的底线就是父元素的底线,它相对于父元素的底线对齐。
下图中的一行所有元素都设置了底线对齐,一行最高的是黄色div,其它元素以它的底线与它们自身的底线对齐
取值:super(上标) | sub(下标)
super/sub:以line box的基线为参照进行上标或下标
作用:类似于html的<sub>、<sup>
取值:text-top (所有文本的顶部)| text-bottom(所有文本的底部)
text-top/text-bottom:以一行上的文本为参照进行上下偏移
垂直对齐相关知识的归纳
关于vertical-align的垂直对齐需要特别注意,所谓vertical-align指的就是容器里有多个inline box(哪怕盒子里只有一个inline box,该inline box所在行都有一个line box的基线,都可以设置vertical-align),这些box需要垂直对齐时,它们都是相对于line box的四条线为基准进行上下偏移。总结以上的各个属性值可以得出:
1.baseline:以自身的基线与line box的基线进行对齐
2.px、em、rem、%、sub、super:以line box的基线为参照进行上下偏移
3.top、middle、bottom:以自身的顶线、中线、底线与line box的顶线、中线、底线对齐。
4.text-top、text-bottom:以自身的顶线或底线与一行上的文本的顶部与底部进行对齐
非原生行内块元素的垂直对齐
这里所说的非原生行内块指的是被转换为行内块的div、span等容器元素,它们比较特殊,如果它们没有包含任何内容,则它们的基线就是它们自身的底线,如果它们包含了内容,则它们的基线是它们包含的最后一行内容的基线。
以下设置了两个行内块div元素,它们没有包含任何内容,所以它们的基线就是自己的底线,默认是baseline对齐,效果如图所示
现在往第二个div里插入文本后,发现效果如下图。这是因为第二个div的基线是它包含的最后一行内容的基线。
标签:box,底线,元素,垂直,基线,对齐,line,css 来源: https://www.cnblogs.com/myrocknroll/p/11619756.html