css - 垂直对齐

Posted 2022-12-17 myrocknroll

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的基线是它包含的最后一行内容的基线。

 

 

 

前端学习总目录