css - 垂直对齐

素颜马尾好姑娘i 2023-06-05 12:45 128阅读 0赞

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的各个值的效果。

**![406079-20190716151012317-942246147.png][]**

**vertical-align的应用方式**

vertical-align有一些非常迷惑人的特点，所以很多人在使用这个属性的时候会发现超多的意外情况。比如你为一行上的img设置了vertical-align：middle，你会发现这个设置对其它在一行上的元素居然也有效。实际上你只需要记住，vertical-align:baseline是每个元素都具备的默认属性，如果你只是为一行上的某一个元素设置了非baseline的vertical-align，那么只有这一个元素会应用这个新的垂直对齐特性，而一行上的其他元素应用的依然是baseline！如果这一点没搞清楚，你会被迷惑得抓狂。请记住，默认baseline！你可以手动覆盖这个属性值，但只有明确设置了新特性值的元素才会应用新的垂直对齐方式，其它元素并不变化，依然是baseline。

**vertical-align属性值**

设置给：inline box

继承性：无

作用：设置某个inline box相对于包含它的line box的四条线的垂直对齐方式，所以，当一行当中出现纯文本、行内、行内块元素时，你就要想到该行的line box与这些元素之间存在默认的基线对齐。垂直对齐与作为一行上的块元素无关，块元素是独占一行，不存在垂直对齐。

**取值：baseline**

baseline：以line box的基线为参照与自身的基线对齐

![406079-20190716173925968-2065935367.png][]

**取值：px | em | rem ……**

px/em/rem：以line box的基线为参照进行上下偏移，可以把基线看做0刻度线，向上偏移取正数，向下偏移取负数

![406079-20190716173245852-1383469194.png][]

**取值：%**

%：以line box的基线为参照进行上下偏移，将当前元素的行高\*%，正百分比向上偏移，负百分比向下偏移

![406079-20190716173158028-788596996.png][]

**取值：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的顶线与自身的顶线对齐

![406079-20190716174301690-958614467.png][]

下图中的黄色div设置了vertical-align:middle，黄色div以隐形x的中线与自身的中线对齐

![406079-20190716174437438-333065462.png][]

下图中的黄色div设置了vertical-align:bottom，一行黄色div最高，它的底线就是父元素的底线，它相对于父元素的底线对齐。

![406079-20190716181842160-1674543899.png][]

下图中的一行所有元素都设置了底线对齐，一行最高的是黄色div，其它元素以它的底线与它们自身的底线对齐

![406079-20190716191952416-600067568.png][]

**取值：super（上标） | sub（下标）**

super/sub：以line box的基线为参照进行上标或下标

作用：类似于html的<sub>、<sup>

![406079-20190716182648878-260160023.jpg][]

**取值：text-top （所有文本的顶部）| text-bottom（所有文本的底部）**

text-top/text-bottom：以自身的顶底部与一行上的文本的顶底部作为参照进行对齐

![406079-20190716182953498-1044399201.png][]

###### 垂直对齐相关知识的归纳 ######

关于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对齐，效果如图所示

![406079-20190716140129326-1706243256.png][]

现在往第二个div里插入文本后，发现效果如下图。这是因为第二个div的基线是它包含的最后一行内容的基线。

![406079-20190716140256999-3295355.png][]

**[前端学习总目录][Link 1]**

转载于:https://www.cnblogs.com/myrocknroll/p/11619756.html

[406079-20190716151012317-942246147.png]: /images/20230601/49c0ecf6521b4f9692577027ab16af76.png
[406079-20190716173925968-2065935367.png]: /images/20230601/ca037f1dbc53479b81aaf224c9863b3f.png
[406079-20190716173245852-1383469194.png]: /images/20230601/801ec770984b42b4a119b77dc4338628.png
[406079-20190716173158028-788596996.png]: /images/20230601/0de745944e364c2aa95c4e6b457cd8f3.png
[406079-20190716174301690-958614467.png]: /images/20230601/ff3d37c17fb24f2f82e525b94721eb23.png
[406079-20190716174437438-333065462.png]: /images/20230601/d58e6d5a5a3441b999bc271c4dff0beb.png
[406079-20190716181842160-1674543899.png]: /images/20230601/28809c483b6c411fba741816fcaf4219.png
[406079-20190716191952416-600067568.png]: /images/20230601/c563777ba437479ba5d0eb7fa3624116.png
[406079-20190716182648878-260160023.jpg]: /images/20230601/307353cc0cda4e749f1d894c70b1c930.png
[406079-20190716182953498-1044399201.png]: /images/20230601/b45748da6f804c0bae6ac5b37bac30ad.png
[406079-20190716140129326-1706243256.png]: /images/20230601/43edbdd6903043618cf1f457d18fc2fe.png
[406079-20190716140256999-3295355.png]: /images/20230601/219f95800d424384809896280b675ee6.png
[Link 1]: https://www.cnblogs.com/myrocknroll/p/10198879.html