日常对元素的概念一窍不通。一直以来，我只记得遇到img和text的时候，如果要对齐，可以给img设置vertical-align:middle之类的。我还没有很好地理解该做什么。直到有人问我为什么不能给文字设置vertical-align，我的脑子嗡嗡作响。前几天学习的时候根本没想过这个问题，就去看了下。经过一番寻找，终于明白了。这里我会告诉你为什么使用vertical-align的每个值。下面我给大家介绍一下内联元素和内联块元素。先不说表格单元格的值相对于父元素的值基线当前设置的元素的基线与父元素的基线对齐。X是父元素的内容，另外两个是子元素的内容。baseline是默认样式，所以没有给元素的基线和父元素分配下标基线对齐super元素的基线与父元素text-top的上标基线对齐，这样顶部元素与父元素的字体顶部对齐。很明显，"Hello"字样与父元素的text-bottom对齐元素的底部与父元素字体的底部对齐middle元素的中间与父元素的基线对齐加上父元素x高度的一半。相对行值top将元素及其后代的顶部与整行的顶部对齐。这里可以看到img设置top和spannote设置top会显示两种不同的结果，这也是为什么我们在去掉图片和文字上下空隙的时候选择设置vertical-align的值而不是To设置文本的垂直对齐方式。其实这个也不难理解，因为父元素的高度是由图片拉开的，结合top值的定义。看上面的时候，图片的原因就扔了。整行的顶部是文本Stretched，因此文本向上移动。但是如果给span标签一个vertical-align:top，由于box被img拉伸了，所以span元素需要和这条线的高度对齐，所以这会导致这个元素向上移动，而其他元素还在与基线对齐。bottom将元素及其后代的底部与整行的底部对齐。默认值为：baselineappliestoinlineinline-blocktable-cell
