一文搞懂CSS中的vertical-align属性

　　vertical-align

　　CSS中的vertical-align用于设置行内块或者行内元素行内元素的对齐方式，似乎使用起来很简单，但使用过程中的坑很多，我个人对于这个属性看了比较多的博客，也有点似懂非懂，以下是我的个人理解以及简要的总结。

　　定义以及常见属性位置

　　首先，MDN官方文档给的定义：是设置元素的垂直排列的。用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

　　它的值比较多： | | | | | | | |

　　我们这里只看常用的：

　　按照官方文档的分类：

　　top与bottom的元素整行垂直对齐方式

　　首先要明白什么叫整行。这里的整行指的是几个行内元素、行内块元素所在的那一行，整行的高度由该行最高的元素决定。

　　对于与的使用，以下是我的个人理解：

　　情形1：（不变位置；，自动与box1顶线对齐；，自动与box1底线对齐。）

　　情形2：（不变位置；，自动与box1顶线对齐；，自动与box1底线对齐。）

　　以上两种情况，看似我使用的是同一张图，实质上两种box1的对齐方式并不相同。因此我们可以得出结论，只使用top与bottom时，最高元素不变，其余元素以最高元素（本质上其实就是最高元素就是该行高度）为参照物进行对齐。

　　baseline与middle相对于父元素的对齐方式（相对于父元素的基线）。

　　使用此类属性值时，我们首先要搞清楚父元素的基线位置和子元素的基线位置。

　　父元素的基线位置

　　父元素内有子元素被设置 vertical-aling:baseline 并且有内容存在时，父元素的基线的位置是在子元素的基线所在位置，看下面两张图（绿色线代表基线）：

　　接着，我们给父元素另外一个带有内容的行内块元素，我们可以发现，另一个box位置向下偏移了，两个盒子基线对齐。这似乎存在前后矛盾。

　　我们调换两个元素字体大小，基线位置不变，依旧以字体大小最大的行内块元素的基线位置为准。

　　总结：父元素基线的位置由子元素确定，父元素基线所在的位置就取在子元素还在默认位置时（可以理解为父元素中只有一个子元素时）他们的基线与父元素顶部距离最大的那个位置，其他同行元素相对于父元素的基线对齐。

　　父元素基线确定的简单方法：为父元素添加其伪元素，其 content 的属性值为 x ，那么父元素的基线就可以看到了——就是字母x的下边缘线

　　下面看一个综合案例：

　　其中，红色盒子为带有内容的行内块、蓝色盒子为带有内容的行内块、天蓝色部分为行内元素span、img图像、父元素内部的文字xxXXjjj以及伪元素（::after--inline-block）且含有xXj内容的行内块元素。

　　我们可以很清晰的看到：

　　到此这篇关于一文搞懂CSS中的vertical-align属性的文章就介绍到这了,更多相关CSS vertical-align属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！