前言为什么要写这篇总结？最近在文字图标的垂直对齐中使用了css的vertical-align属性，但有时有效，有时无效。所以想在理清问题前因后果的同时加深对vertical-align的理解，产生如下笔记。vertical-align是自css1以来就存在的属性。该属性定义了行内元素（即显示值为inline和inline-block的元素）、表格元素（table-cell），以及::first-letter、::first-line被选元素的基线相对到元素行框的垂直对齐方式。行内元素：a、span、b、i、button、input、label、select、textarea等表格元素：显示为table-cell的元素一般参考td其他：::first-letter、::first-line取值vertical-align:baseline|子|超级|文字置顶|文本底部|中间|顶部|底部|<百分比>|使设置该属性的元素相对于其父元素垂直）baseline默认值，元素的基线相对于父元素的基线对齐子元素的基线与父元素的下标基线对齐超元素的基线与父元素的上标对齐基线对齐text-top元素的顶部与父元素文本的顶部对齐text-bottom元素的底部与父元素的底部对齐element'stext中间元素的中间对齐父元素的基线+父元素x-height/2（父元素字母x高度的一半）将元素基线对齐到父元素基线上方的指定位置，而负值元素基线对齐到父元素基线上方相应的百分比位置。这个百分比是相对于父元素的行高的，可以是负数。检查代码。注意：和取负值越多，离上顶越远。与margin的值相反，对于没有基线的元素，使用outermarginsBottomedgeoverride。相对行（line-box）值（使设置该属性的元素相对于整行垂直对齐）top使元素及其后代的顶部与整行的顶部对齐整行的后代底部对齐的表格单元格（以及sub、super、text-top、text-bottom、、）的值基线将单元格的基线与所有其他基线对齐的单元格的基线对齐在行中Aligntop将cellpadding的上边缘与linetop对齐middle将cellpaddingboxmodel在线中心对齐bottom将cellpadding的底边缘与line底部对齐baselinebaseline,letter检查代码框模型的上边界和下边界以及沿“x”下边缘的基线。查看代码如图：绿色：行高上下边界红色：文字上下边界蓝色：基线位置左中右分别为行高1和2,0.5的表现，当行高为1时，文字边界与行高边界重合。内联元素的外边缘与行高的顶部和底部边缘对齐。如果行高小于字体高度，则不会受到影响，但顶部、底部会与文本边界对齐。inline-block元素的基线视图在代码图中，左、中、右都是inline-block元素。左图中的inline-block元素内有文本x并没有脱离文档流。中图在左图包含文字的基础上增加了overflow：hidden，右图不包含任何文字。红线代表margin-box边界，蓝线代表baseline，黄色代表border，白色代表padding区域，绿色代表content区域。可以看出，inline-block元素的外边缘就是margin-box的边缘，inline-block元素基线的位置取决于元素是否有正常流中的内容以及是否溢出元素的属性值是可见的。基线的确定规则1.inline-table元素的基线是其表格第一行的基线。2.父元素line-box的基线是最后一个inline-box的基线。3、inline-block元素的基线判定规则如果内部有line-box，则inline-block元素的基线是最后一个作为内容存在的元素的基线，本元素基线的判定必须根据自己来确定。如果其中没有行框或者它的溢出属性不可见，那么基线将是这个行内块元素的底部外边距边界。图标和文字的对齐上图左边是图标设置vertical-align:middle没有生效，很明显图标和文字没有对齐。之所以在标记参考线后查看代码，是因为lefttextvertical-align使用了默认值baseline。而vertical-align:middle对应的是将元素的中间对齐到baseline加上x-height的一半，文字会比图标高一个距离。右图中，文字和图标都中点对齐，line-box高度增加，基线位置不变，文字基线稍微下移到基线以下线框。文本现在与图标对齐。总结：查阅了很多资料，了解了vertical-align。还有一些深入的知识点没有记录下来，下面贴出参考资料。写这篇笔记也解决了我之前关于inline-blockelements之间的gap问题以及相应的解决方案，点此进入。总之，收获很多(??ω??)?参考资料：深入理解CSS中的vertical-align属性你需要知道的关于Vertical-Align的那些事[原文][翻译]深入理解CSSMDN中的垂直对齐
