css中经常使用vertical-aligning来实现垂直居中，但是我一直对vertical-align的使用感到困惑，现在整理一下关于vertical-align的一些知识它点。原文链接1.适用元素vertical-align属性只能应用于行内元素（inline）、行内块元素（inline-block）和table-cell元素（td），包括inline、inline-block和table的display属性-单元格的元素。由于元素在浮动和绝对定位后会自动转换为块元素（block），因此浮动和绝对定位的元素也没有vertical-align属性。2、文字顶线、中线、基线、底线的取值在介绍行高的文章中的图片中已经说明。行框的基线等于行上文本的基线，没有任何人为对齐。内联块元素的基线位置在css中规定：'inline-block'的基线是它在正常流中最后一个行框的基线，除非它没有流入行框或者它的'溢出''属性有一个计算值而不是'visible'，在这种情况下，基线是底部边距边缘。一个inline-block元素的基线是该元素下正常文档流中最后一个行框的基线，除非没有正常流的行框或者它自己的overflow属性值默认是不可见的。此时inline-block元素的基线位置就是margin的底边。以下是w3c中vertical-align的规定：baseline：默认值，框的基线与父框的基线对齐。如果框没有基线，则将框的底部边距与父框的基线对齐。middle：将框的垂直中心点与父框基线上方高度X的一半对齐。sub：将框的基线降低到父框合适的下标位置。super：将框的基线提升到父框的适当上标位置。text-top：将框的顶部（top）与父框内容区域的顶部对齐。text-bottom：将框的底部（bottom）与父框内容区域的底部对齐。%：框相对于基线位置向上或向下移动多少（百分比值是相对于行高line-height），当“0%”时位置与设置的基线一致。值：框相对于基线位置向上或向下移动多少。为0px时，位置与设置基线一致。top：将框的顶部与行框的顶部对齐（行框的顶部是该行行内框的最高点）。bottom：将box的底部与linebox的底部对齐（linebox的底部是linebox的最低点）。上面前8个值是相对于box的parentbox，后2个值是相对于这一行的linebox。从上一篇关于行高的文章我们知道，框的顶部到父框内容区域顶部的距离是半个行距。当框的字体大小等于行高大小时，框的内容区域和父框会重叠，也就是下面的demo中，代表text-top和text-bottom的行会重合线条代表顶部和底部。3.下面的演示来自Vertical-Align:AllYouNeedToKnow。很容易理解各种值之间的关系。verrical-align上面参考线模型的demo中，不同颜色的高度为0的线设置了不同的vertical-align值，margin-right的负值用于放置所有线和最后一行块在同一行框中。刚开始看到这个demo的时候，不知道为什么这些和parent一样宽的线可以放在同一个linebox里。了解后才知道是负margin值的作用。负margin值的相关知识在文末。demo中的所有元素都在同一个linebox中，这些线代表这个linebox的参考线。六个灰色块设置不同的vertical-align值来与父元素对齐。仔细观察，基线对齐就是子元素的基线与父元素的基线对齐。在demo中，子元素的基线是末尾X的下边缘。仔细测量居中块的垂直距离后，我们会发现这个块并没有完全居中。这不是一个bug，但是遵循w3c的规定是安全的：“盒子的垂直中心点与父盒子基线的上X的半高位置对齐”，中间的参考线??也穿过最左边X的中心点，字符有下沉的特性，所以X的中心点不是字符所在行内框的中心点，也不是整个行框的中心点。我们可以将font-size设置为0以使元素完全垂直居中。4.应用4.1单选按钮复选框或小图标与文字对齐Aligningsmallicons由于vertical-alignmiddle不允许元素完全居中，会受到字体大小的干扰，所以middle用于alignmentofsuchsmallicons会让这种干扰更加明显，所以设置像素值让小图标相对于基线偏移是比较准确的。4.2高度不固定的图片垂直居中（方法一）查看demo（测试发现预览中的按钮点击无效，请点击原链接测试）在上面的demo中，当我们改变vertical的值时图像的-align属性，我们发现整个linebox的基线位置也发生了变化。这是因为linebox的最高点和最低点都在图片上，所以linebox的高度等于图片的高度。当图片的vertical-align值发生变化时，linebox中没有足够的空间让图片移动，所以只能移动baseline。而当图片的vertical-align值设置为middle时，图片在parentlevel中并没有垂直居中，因为图片只是在图片所在的rowbox中近似垂直居中。要使图片在父级别居中，可以使行框的高度等于父框的高度。也就是说，你可以让父级的行高等于高度。图片垂直居中，字体大小设置为0，就是让元素完全垂直居中。在上面的例子中，有没有文本标签没有区别。我们可以看到父框中有一个空白的文本节点作为基线位置的参考。4.2不固定高度的图片垂直居中（方法二）方法二链接描述了上面demo的方法，创建一个高度为100%的伪元素（空元素也可以），这样这个元素的基线就会与父级的基线重合，空元素的垂直中心点也与父级的中心重合，图片也会垂直居中。4.3不固定高度的文字垂直居中文字垂直居中的方法与图片类似。文本标签是inline-blocked，然后按照图片居中的方法居中。需要注意的是，父元素的font-size设置为0，这是为了消除伪元素（或空元素）与文本标签之间的空隙。如果存在这个间隙，伪元素将换行而不匹配文本元素。在同一个linebox中，垂直居中会失效。5.负边距值的应用（从负边距我知道你不知道）margin的四个值，虽然本质上都是在其他元素之间创建间距，但实现方式不同.其中left和top值是改变自己相对于相邻元素边框的位置，而right和bottom是相对于元素本身的位置影响周围元素的位置（其实就是参考线影响右侧和下方的相邻元素）。当margin值为正时，会按照正常逻辑在元素周围产生间距。当元素的margin-left和margin-top为负值时，元素将向左或向上移动。当元素的margin-right和margin-bottom为负值时，元素的右侧和下方的元素参考线位置会发生变化。在上面的demo中，六个辅助线的宽度与父元素的宽度相同，所以它们默认会在六个不同的lineboxes中。但是给他们设置一个margin-right负值。如果负值足够小，下一行的元素就会被拉高。一般情况下，margin-right的值等于负元素宽度，但是默认情况下六个inline-block元素之间会有间隙。我们可以把代码写成一行来避免这个空隙，但是可读性比较低。可怜，这个缺口的大小默认和父元素的字体大小有关。也可以将父元素的font-size设置为0来消除间隙，但是这样会造成几条参考线重叠，影响表达效果。因此，上述demo中line元素的margin-right值的绝对值略大于元素的宽度，这是为了抵消正常流中inline-block元素之间的间隙。
