在学习vertical-align属性时了解到：
vertical-align属性指定内联元素或table-cell的垂直对齐方式。
但是只看属性名还是无法理解使用这个属性的元素是在跟什么东西对齐。比如sub、super等。
所以我研究了一下：
首先内联元素和table-cell在使用vertical-align属性时，同一个属性值的含义不同。我们这里主要讨论内联元素的vertical-align属性值。
内联元素
-
baseline(默认值)
将元素的基线与其父元素的基线对齐。如果元素没有基线baseline，则以它的外边距的下边缘为基线。
元素的基线是指x大部分字母“坐”在的，字体的下降部之上的直线。
image
而属性值baseline就是让元素的底部或者基线与父元素的基线对齐。
示例：
图中红色方块的下边缘与它的父元素的基线对齐。
image
代码链接
-
sub
将元素的底部或者基线与父元素的下标的基线对齐。
示例：
图中较小的字母为较大字母的下标，而sub属性使红色方块的下边缘与父元素下标的基线对齐。
image
代码链接
-
super
将元素的底部或者基线与父元素的上标的基线对齐。
示例：
图中较小的字母为较大字母的上标，而super属性使红色方块的下边缘与父元素上标的基线对齐。
image
代码链接
-
text-top
元素顶端与父元素字体的顶端对齐。
示例：
图中红线边框为父元素的边框，text-top属性使元素的上边缘与父元素边框的上边对齐。
image
代码链接
-
text-bottom
元素底端与父元素字体的底端对齐。
示例：
图中红线边框为父元素的边框，text-bottom属性使元素的下边缘与父元素边框的下边对齐。
image
代码链接
-
middle
元素的中心与父元素的基线加上小写x一半的高度值对齐。
示例：
middle属性使元素中心与父元素的小写x的中心对齐。
image
代码链接
-
长度(em、px)
元素基线超过父元素的基线指定高度。可以取负值。
示例：
以baseline的对齐高度为基准，长度为正数向上偏移，长度为负数向下偏移。
image
代码链接
-
百分比
含义同长度, 百分比指的是 line-height 的百分之多少。
示例：
以baseline的对齐高度为基准，长度为正数向上偏移，长度为负数向下偏移。
image
代码链接
-
top
元素及其后代的顶端与整行的顶端对齐。
示例：
黄色边框为元素父元素的边框，红色边框为元素所在行的边框。
使用text-top时元素上边框与父元素上边框对齐。
image
代码链接
使用top时元素上边框与元素元素所在行的上边框对齐。
image
代码链接
-
bottom
元素及其后代的底端与整行的底端对齐。
示例：
黄色边框为元素父元素的边框，红色边框为元素所在行的边框。
使用text-bottom时元素下边框与父元素下边框对齐。
image
代码链接
使用bottom时元素下边框与元素元素所在行的下边框对齐。
image
代码链接
table-cell元素
-
baseline
-
top
-
middle
-
bottom
这几个属性的对齐方式如下：
image
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
以上。
网友评论