摘要：内联元素的外边缘与该行高的顶部和底部边缘对齐。如果行高小于字体的高度，不会受影响，但会对齐文本边界。红线表示边界，蓝线表示，黄色为，白色为区域，绿色为区域。的确定规则元素的是它的第一行的。
前言
为什么写这篇总结？最近在文字图标垂直对齐上用到css的vertical-align属性，但是有的时候有效，有的时候无效，常常疑惑不解，反思这是自己对vertical-align的基本认知不够造成的。所以想在自己理清问题前因后果的同时，加深对vertical-align的理解，产出如下笔记。
vertical-align是自css1就存在的属性，该属性定义行内元素（也就是display值为inline和inline-block的元素）、表格元素（table-cell）以及 ::first-letter、::first-line选择的元素的基线相对于该元素所在行（line-box）的垂直对齐。
行内元素：a, span, b, i, button, input, label, select, textarea 等
表格元素：display为table-cell的元素 一般指td
其他： ::first-letter、::first-line
取值
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom ||
注释： 根据MDN说明，取值可分为三大类
相对父元素的值（使设置该属性的元素相对其父元素垂直对其）
baseline 默认值，元素的基线相对于父元素的基线对齐
sub 元素的基线与父元素的下标基线对齐
super 元素的基线与父元素的上标基线对齐
text-top 元素的顶部与父元素的文字顶部对齐
text-bottom 元素的底部与父元素的文字底部对齐
middle 元素的中部与父元素的基线+父元素x-height/2（父元素字母x的高度的一半）对齐
查看代码
注：, 取负值越多时距离上顶端越远，和margin取值相反 没有基线的元素，使用外边距的下边缘替代。
相对行(line-box)的值（使设置该属性的元素相对整行垂直对齐）
top 使元素及其后代元素的顶部与整行的顶部对齐
bottom 使元素及其后代元素的底部与整行的底部对齐
表格单元格的值
baseline(以及 sub, super, text-top, text-bottom,
top 使单元格内边距的上边沿与该行顶部对齐
middle 使单元格内边距盒模型在该行内居中对齐
bottom 使单元格内边距的下边缘与该行的底部对齐
baseline
baseline基线，字母"x"的下边沿线
查看代码
盒模型的上下边界 与 baseline
查看代码
如图：
绿色：行高的上下边界
红色：文本的上下边界
蓝色：baseline位置
左、中、右分别为行高1、2、0.5的表现，行高为1时，文本边界与行高边界重合。内联元素的外边缘与该行高的顶部和底部边缘对齐。如果行高小于字体的高度，不会受影响，但top, bottom 会对齐文本边界。
inline-block元素的基线
查看代码
图中左、中、右都是inline-block元素，左图inline-block元素内部存在未脱离文档流的文本x，中图在左图包含文本基础上添加overflow:hidden，右图不包含任何文本。红线表示margin-box边界， 蓝线表示baseline，黄色为border， 白色为padding区域，绿色为content区域。
可见 inline-block元素的外边缘就是margin-box的边缘、inline-block元素的baseline的位置要看该元素有没有处于正常流的内容以及元素的overflow属性值是不是visible。
baseline的确定规则
1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素line-box的baseline是最后一个inline-box的baseline。
3、inline-block元素的baseline确定规则
如果内部有line-box，则inline-block元素的baseline就是最后一个作为内容存在的元素的baseline，而这个元素的baseline的确定就要根据它自身来定了。
如果其内部没有line-box或它的overflow属性不是visible，那么baseline将是这个inline-block元素的底margin边界。
icon与文本对齐
上图左为icon设置vertical-align: middle没有生效，很明显图标和文字没有对齐。标注参考线后
查看代码
原因在于左边文字vertical-align使用默认值baseline。而vertical-align:middle对应元素中部对齐于baseline加上半个x的距离(half of the x-height)，文本会高出icon一段距离。
右图中，文字与icon都对齐于一个中点，line-box的行高增加，baseline位置不变，文字的baseline稍微下移，位于line-box的baseline的下方。此时文本与图标对齐。
总结：查阅很多资料，算把vertical-align理解了。其中还有一些深入的知识点没有记录，下面会贴上参考资料。
写这篇笔记同时也解决了我之前的对inline-block元素间存在间隙的疑问以及对应的解决方案，点此进入。
总之 收获多多 ( • ̀ω•́ )✧
参考资料：
深入理解css中vertical-align属性
关于Vertical-Align你需要知道的事情 [原] [译]
深入理解css之vertical-align
MDN vertical-align
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116112.html
摘要：关于的条参考线以及。关于和之间的关系。目标元素的的垂直平分线，与父元素内匿名的对齐。垂直平分线，这个容易理解。要比这些字母的顶端再高一些。 前言 关于 vertical-align，我们很容易想到，这不就是告诉我们元素在纵向上和什么对齐的属性吗？而事实上，正是这种宽泛的说法导致了我们对其的理解存在许多不确定性。事实上，对齐这两个字其实牵涉到4个对象：即哪个对象的哪条线，与哪个对象的哪条...
摘要：在元素的和固定的情况下，一点小的改变也很有可能对布局造成影响。其中高度有可能是由元素的内容决定的。行高的上下边界是红线。元素也有和上下边界，元素是需要对齐的对象。因此文字的最高点超过了的高度。在第二种情况下，另外两个元素的位置发生了下移。 写在前面的话 开始学习前端以来，在CSS相关知识当中困扰我最多的就是Vertical-Align这个属性。在stackoverflow上查找相关问...
摘要：绝对定位让元素脱离文档流，所以他们不再影响他们的周边元素。元素在文档流中，也能感知其他元素尺寸的改变。中间，一个在文档流中的元素并且带有属性的元素。最右，不在文档流中的元素但是内容区域有高度。元素的基线依赖于元素是否是文档流中的元素。 原文：Vertical-Align: All You Need To Know 通常我都有需要垂直对齐在一排上一个接着一个的元素。CSS提供了很多种可能...
摘要：如何让一段文字居中，在人类看来如此简单的问题，在界却变成了多年令人头疼的问题，关于居中的文字如汗牛充栋，但每到用时还是会有问题。关于垂直居中，中最基本的一个属性就是，要了解，首先要了解基线，因为的缺省值就是。元素放置在父元素的基线上。 如何让一段文字居中，在人类看来如此简单的问题，在css界却变成了多年令人头疼的问题，关于居中的文字如汗牛充栋，但每到用时还是会有问题。单单一个『中』是什...
摘要：之前看了张大大的博客总结一下我对和的一些认知。站在巨人的肩膀上学习，再次谢谢张大大阮大大的各种分享。 对于元素的水平居中，我根据我自己之前的一些学习来进行一些总结，如果有不对的地方，欢迎指正~ 一、让大小不固定的元素垂直居中 因为：表格的单元格的特别属性：垂直居中等； `div.parent { display: table-cell; vertical-align...
阅读 3706·2021-10-18 13:34
阅读 2395·2021-08-11 11:15
阅读 1201·2019-08-30 15:44
阅读 687·2019-08-26 10:32
阅读 984·2019-08-26 10:13
阅读 2063·2019-08-23 18:36
阅读 1774·2019-08-23 18:35
阅读 522·2019-08-23 17:10
