.icon{display:inline-block;/*尺寸、颜色等*/}.middle{vertical-align:middle;}通常遇到vertical-align，都会有各种疯狂的时候。虽然调整了，但心里一直很空虚，因为一直没有完全了解它。对于这个属性，我在搜索的时候发现了一篇很棒的文章，算是翻译了一半。让我总结一下这个属性。介绍说到vertical-align，大家都知道是用于相邻的文本和行内元素，比如常见的图标和相邻文本的居中对齐。但是当你不了解他的机制时，它常常会让你发疯，所以让我们一次一个地揭开这个规则的神秘面纱。vertical-align如何作用于linebox中的inline元素vertical-align用于对齐inline-level元素，即显示值为inline、inline-block或inline-table的元素（这个通常不考虑).内联元素是最基本的包含文本的标签，如span等inline-block。顾名思义，它是行中的块级元素，可以设置宽度、高度、间距边框。行内元素以行的形式彼此相邻排列。一旦有更多的行内级元素超过了当前行可以容纳的长度，就会在它下面生成一个新行。也就是我们常说的行框（linebox），行框包含了它所在行的所有内容。不同大小的内容意味着行框也有不同的高度。下图中，三个线框的顶部和底部用红线标出。linebox勾勒出这些内容所占的区域，vertical-align负责对齐linebox中的每个元素。问题是，这些元素相对于哪些线对齐？关于baselines,tops,bottoms你要知道垂直对齐最关键的参考线就是元素的baseline基线。在某些情况下，元素包含框的顶线tops和底线bottoms也变得非常重要。让我们来看看各种类型元素的基线、顶部和底部。如图所示，内联元素具有三行带有不同标记的文本。红线代表line-height的顶部和底部；绿线代表文本字体的高度。这里需要注意的是，文本内容区域的实际高度并不严格等于字体高度，而是由font-size和font-family决定的，特殊情况是在Arial字体下，实际内容区域等于字体的高度。但是这种差异一般是无害的，我们假设内容区域的高度可以用字体的高度来表示；蓝色的线表示baseline基线，可以理解为字母x的底边线，比字体高度x-height为2的中心低1/左右。左图的行高设置与字体高度相同，所以红线和绿线重合。中间图片的行高设置为字体高度的两倍，行间距分为上下两部分平分一个字体高度，即上下半个字体高度分别相对于绿线.右图的行高设置为字体高度的一半，即字体高度的四分之一相对于绿线向下和向上。inline-block元素从左到右分别是流中包含in-flow内容的inline-block元素，流中包含in-flow内容的inline-block元素，同时设置了overflow:hidden,以及一个不包含流内容但具有inline-block元素高度的元素。红线表示行内块元素的外边距边界。图中黄色框模型为border，浅绿色为padding，浅蓝色为content；蓝线表示行内块元素的基线。可以得出，inline-block元素的外边缘线就是margin-box的上下边界，也就是图中的红线。baseline的规则判断比较复杂，可以简单记为：如果不包含内容或者overflow属性不是visible以外的值，则baseline为底边线，也就是bottomboundary边距框。linebox上图用几行就很清楚的展示了linebox的结构。绿线表示行框中的文本框，这里称为文本框的顶线和底线。同时，文本区域以灰色背景突出显示。行盒的顶行与其中最高的元素对齐，行盒的底行与其中的最低元素对齐。linebox的基线在草案中没有明确定义：CSS2.1没有定义linebox基线的位置。—TheW3CSpecs这可能是最让人困惑的地方，他的意思是linebox的baseline就是满足所有其他vertical-aligns同时最小化linebox高度的地方。这个还是很抽象，但是有一个方法可以具体化，就是如图所示在linebox的最前面加一个x字符，这个字符和基线对齐。这条基线周围的绿线就是wordbox，可以理解为linebox中没有任何对齐的内联元素，它的高度等于字体的高度（前面说了，不考虑字体因素）.草稿中，角色x模拟出来的隐形词框叫做strut，张新旭在他的博客中称其为幽灵空白节点。总结一下，linebox就是vertical-align发挥作用的地方。它包括基线、字框、顶线和底线。每个内联元素也有自己的基线、顶线和底线。vertical-alignalignmentbaselines,tops,bottoms用上图表示各种对齐的形式。baseline：内联元素的基线正好在linebox的基线上。sub：内联元素的基线位置低于linebox的基线。super：内联元素的基线位置高于行框的基线。：内联元素的基线相对于linebox的基线移动一个对应行高百分比的值。：内联元素的基线相对于linebox基线偏移一个绝对值。中间：可以强调居中对齐。意思是内联元素的顶线和底线的中线和线盒的基线向上偏移了x-height的一半，可以大致理解为字符中间的交点X。text-top：内联元素的顶行与行框文本框的顶行对齐。text-bottom：内联元素的底线与行框的文本框底线对齐。top：内联元素的顶行与行框的顶行对齐。bottom：行内元素的底线与linebox底线对齐。案例研究：为什么vertical-align会这样？图文对齐是前端开发者最常见的场景。虽然现在很多都是使用字体图标或者一些组件，很多时候不需要考虑对齐，但是自己写的时候还是有必要了解这个基本原理的。请参阅下面的示例。使图标居中图标旁边有一行文本。如果把文字和图标居中对齐，大部分人都会对图标使用vertical-align:middle，但是你会发现好像并没有真正居中：上图两侧的对比是很明显，左边的文字有点高，右边是完美的居中对齐。两边代码如下：Centered?居中！.icon{display:inline-block;/*尺寸、颜色等*/}.middle{vertical-align:middle;}这是为什么？画辅助线看：很明显，左边的文字是和默认基线对齐的，有ascender的文字除以x的中线位置会更高。右图中，将文本用span标签包裹起来，整个文本内容区域使用middle，这样它的基线位置会相对于linebox基线稍微下沉，从而与图标居中。linebox基线位置的移动和变化前面提到linebox的baseline位置会受到line中所有元素的影响，大部分的对齐方式都与linebox的baseline有关，所以如果linebox的基线发生变化，整个布局就会发生变化。发生变化。比如：如果有一个非常高的inline元素，比之前的linebox的高度还要高，看此时linebox占用的空间如何变化。顶部对齐。可以看到lineboxbaseline、topline、bottomline的位置。.tall-box,.短框{显示：内联块；/*大小、颜色等*/}.text-bottom{vertical-align:text-bottom;}.text-top{垂直对齐：文本顶部；}}/style>在内联元素下方的空隙中，我们想一个我们经常遇到的场景：.box{display:inline-block;/*大小、颜色等*/}内联元素下面总会有空隙，因为鬼空白节点在作怪。现在inlineblock的baseline是bottomedgeline和wordbox的baseline是对齐的，gap是wordboxbaseline下的descender。linebox的基线位置就够了，比如top和middle。.box{显示：内联块；/*尺寸、颜色等*/}.middle{vertical-align:middle;}总结之后，我们后面会遇到对齐问题，只需要搞清楚两个问题即可：linebox的baseline、topline、bottomline在哪里？内联元素的基线、顶线和底线在哪里？
