Vertical-Align，你该知道的都在这里

.icon{display:inline-block;/*尺寸、颜色等*/}.middle{vertical-align:middle;}好了，说说vertical-align。此属性的主要目的是将相邻文本与元素对齐。事实上，verticle-algin可以在不同的上下文中灵活地对齐元素，并在不知道元素大小的情况下进行细粒度控制。元素保留在文档流中，因此其他元素可以根据其大小的变化进行相应调整。一个有用的例子是将一个图标居中，旁边有文本。Vertical-Align是个怪兽然而，vertical-align有时会很棘手并经常导致混淆。就好像有某种神秘的规则在起作用。比如我们改变了一个元素的vertical-align，但是它的对齐方式没有变，但是同一行其他元素的对齐方式变了！我还是时不时掉进vertical-align的坑里，无望无助。不幸的是，关于这个主题的很多信息都是肤浅的。特别是在布局的情况下。很多文章在概念上都很混乱，试图在一个元素内垂直对齐所有内容。他们介绍了这个属性的基本概念，在简单的情况下解释了元素的对齐方式，而没有深入到真正棘手的部分。因此，我给自己定了一个目标：彻底理解vertical-align的行为。然后我啃了W3CCSS规范并尝试了一些例子。终于写出了这篇文章。好的，让我们开始吧。对于哪些元素可以使用Vertical-AlignVertical-align用于对齐行内元素。所谓内联元素，是指display属性值为以下之一的元素：inlineinline-blockinline-table（本文不涉及）其中，内联元素是一个包含文本的标签。行内块元素（inline-blockelement），顾名思义，就是位于行内的块元素。可以有宽度和高度（可以由其内容决定），以及填充、边框和边距。内联级元素彼此相邻排列。如果一行放不下，则在下面再建一行。所有行都创建了所谓的行框，它将所有内容都保存在自己的行中。内容的高度不同，linebox的高度也不同。在下图中，行框的顶部和底部用红色虚线表示。这些线框限制了我们可以影响的区域。在行框内部，可以使用垂直对齐来对齐各个元素。那么，相对于什么来对齐元素呢？基线与外边界的垂直对齐最重要的参考点是关联的元素基线。在某些情况下，线框的顶部和底部外边界也可以作为参考点。让我们看一下相关元素类型的基线和外边界。内联元素这里是三行并排的文本。红线代表行高的上下边缘，绿线代表字体高度，蓝线代表基线。左边那一行，行高和字体高度一样，所以上下红绿线重叠。对于中间一行，行高是字体大小的两倍。右行，行高是字体大小的一半。内联元素的外边框与其自身行高的顶部和底部对齐。line-height是否小于font-size并不重要。因此，上图中的红线也代表了外边界。内联元素的基线是字符刚好所在的线，图中的蓝线。粗略地说，基线总是通过低于字体高度一半的点。可以参考W3C规范中的详细定义。inline-block元素从左到右：inline-blockwithin-flowcontent("c"),inline-blockwithin-flowcontentandoverflow(overflow:hidden)set,andnoin-flowcontent(but内容区域有高度）内联块。红线表示margin的边框，黄色是border，绿色是padding，蓝色是内容区域，蓝色线是每个inline-block元素的基线。inline-block元素的外边界是其marginbox的上下两侧，也就是图中的红线。内联块元素的基线取决于该元素是否包含流内内容：对于具有流内内容的内联块元素，基线是正常流中最后一个内容元素的基线（左）。最后一个元素的基线是根据它自己的规则找到的。对于具有流入内容但其overflow属性值不可见的行内块元素，基线是边距框的底部边缘（中间）。也就是说，它与行内块元素的底部外边界重合。对于没有流入内容的行内块元素，基线也是边距框的底部（右）边缘。行框以前在这张图片中出现过。但是这次我们绘制了行框文本框的顶部、底部（绿色，下面更多）和基线（蓝色）。此外，文本元素的区域以灰色背景表示。行框的上边缘与行中最顶部元素的上边缘重合，下边缘与行中最底部元素的下边缘重合。因此，图中的红线代表线框。线框的基线是可变的：CSS2.1没有为线框定义基线。这可能是使用垂直对齐时最令人困惑的部分。也就是说，在哪里绘制基线需要满足很多条件，比如满足vertical-align指定的条件，同时要保证linebox的最小高度。这是一个自由变量。因为linebox的基线是不可见的，所以有时不容易确定它的位置。但实际上有一种简单的方法可以让它可见。在相关行的开头加上一个字母即可，比如上图开头的“x”。如果字母未对齐，则默认位于基线上方。围绕基线的是行框内的文本框。文本框可以简单地认为是行框内未对齐的内联元素。文本框的高度等于其父元素的字体大小。因此，文本框仅用于保存未格式化的文本。上图中的绿线代表文本框。由于文本框与基线相关联，因此它会随着基线的移动而移动。（这个文本框在W3C规范中叫做strut。）终于，最难的部分完成了。现在，我们知道对齐的一切。这里简单总结一下最重要的两点。有一个区域叫做行框。行框中的内容可以垂直对齐。行框有基线、文本框、顶部和底部。还有内联元素，就是可以对齐的对象。内联元素有一个基线、顶部和底部。Vertical-Align的值使用vertical-align，上面提到的参考点会按照一定的关系来设置。将内联元素的基线与行盒的基线对齐：元素基线与行盒基线重合。sub：元素的基线移动到线框基线以下。super：元素的基线移动到行框基线之上。：元素基线相对于linebox基线上下移动的距离等于line-height的百分比。：元素基线相对于linebox基线向上或向下移动指定距离。将元素的外边框中心相对于线框的基线对齐：元素的顶边和底边的中点与线框的基线加上x高度的一半对齐。还有另外两种情况，元素的外边框相对于行框的文本框对齐相对于行框的基线对齐，因为文本框的位置由行框的基线决定。text-top：元素的上边缘与行框文本框的上边缘对齐。text-bottom：元素的底边与linebox的文本框的底边对齐。将元素的外边框顶部相对于行盒的外边框对齐：元素的上边缘与行盒的上边缘对齐。bottom：元素的底边与linebox的底边对齐。为什么Vertical-Align的行为如此反常让我们看看某些情况下的垂直对齐。特别是在一些容易出错的情况下。有一个关于居中图标的问题一直困扰着我。我有一个图标，我想用一行文本将它垂直居中。如果你只应用vertical-align:middle，它似乎不起作用，比如这个例子：Centered?居中！.icon{display:inline-block;/*尺寸、颜色等*/}.middle{vertical-align:middle;}还是一样的例子，只是这次多了一些辅助线：这次可以看清楚问题了。因为在左侧的情况下，文本未对齐但仍高于基线。应用vertical-align:middle实际上会使图标的中心与非前导小写字母的中心（x高度的一半）对齐，因此前导字母将在顶部突出。在右侧，它仍然与整个字体区域的垂直中点对齐。结果，文本的基线向下移动了一点，使文本与图标完美对齐。lineboxbaseline的移动这是使用vertical-align时的一个常见陷阱：lineboxbaseline的位置会受到其中所有元素的影响。假设一个元素采用了导致行框移动的对齐方式。由于大多数垂直对齐方式（顶部和底部除外）是相对于基线计算的，这会导致行中的所有其他元素重新定位。下面是几个例子。如果行中有一个非常高的元素，则该元素上方或下方没有空间，必须移动它以与行框的基线对齐。短框是vertical-align:baseline。左边的高框是vertical-align:text-bottom，而右边的tallbox是vertical-algin:text-top。如您所见，基线随着短框向上移动。.tall-box,.短框{显示：内联块；/*大小、颜色等*/}.text-bottom{vertical-align:text-bottom;}.text-top{垂直对齐：文本顶部；}将较高的元素与vertical-align的其他值对齐时会出现相同的行为。即使将vertical-align设置为底部（左）和顶部（右）也会导致基线移动。这很奇怪，因为此时基线与它无关。.tall-box,.short-box{显示：内联块；/*尺寸、颜色等*/}.bottom{vertical-align:bottom;}.top{垂直对齐：顶部；}将两个较大的元素排成一行并垂直对齐，基线也会移动以匹配两个对齐方式。然后，调整行的高度（左）。又添加了一个元素，但是元素的对齐方式决定了它不会超出linebox的border，所以linebox不会被调整（中）。如果添加的元素会超出linebox的边界，linebox的高度和基线会重新调整。在此示例中，前两个框向下移动（右侧）。.tall-box{display:inline-block;/*尺寸、颜色等*/}.中间{垂直对齐：中间；}.text-top{垂直对齐：文本顶部；}.text-bottom{垂直对齐：文本底部；}.text-100up{垂直对齐：100%；内联元素下方可能有一个小间隙看这个例子：对列表元素的li应用vertical-align。