再次认识 vertical-align

css中的基础知识，上次在刷 segmentfault 遇见了一个相关的问题有再次看过 vertical-align 的描述。今天自己也遇见一个类似的问题，再次深入学习一下。

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

忆童年学习（涉及后文理解）

无论当初起跑的时候你学的是英语还是拼音，最后你还能记得英语的26个字母用拼音的方式怎么读吗？所以这个时候我就可以装一装了，我不是学的拼音。

由于后文学习的知识会涉及到小学知识，作为小学学霸的我开始发车了，没上车的赶快上车。

大致画了一个 四线三格 然后写了26个字母。总结了一些写法上面的规则如下：

大写字母始终写在上两格
小写字母 bdfhiklt 写在上两格
小写字母 gpqy 写在下两格
小写字母 j 写在上中下三格
小写字母除上述三种小写字母的情况以外都是写在中间格

语法学习

行内元素（inline）

vertical-align: baseline; 默认值情况下，元素基线与父元素的元素基线对齐。

父元素内的字母基线刚刚按照我画的第三条线为基线，图片的基线与父元素的基础对齐，图片高度（15px）不足父元素基线到顶部的高度。

如果我试着不限制图片的高度不限制（50px），接下来会发现父元素被撑高了。但是顶部与父元素顶部平齐，底部与父元素内的文本的第三条基线对齐（画的基线只是作为参考）。

如果去掉小写字母 gpqy 会发现图片与div的底部还是会存在一个距离

通过上两图的对比，能发现我之前遇见的问题，就是img放置在div中，div的高度会比图片的高度高3px,3.5px,4px等情况。因为第三格的距离还是存在，也就能理解之前的有一种解决方案，如果div中不存在文本，直接设置 font-size: 0; 。但浏览器有最小字体限制，也就不是那么好的解决方案了。

vertical-align: sub; 元素的基线与父元素的下标基线对齐。（底部高度合适，内容没有被挤出四线格）

vertical-align: super; 元素的基线与父元素的上标基线对齐。（顶部高度不够，内容被挤出了四线格）

vertical-align: text-top; 元素顶端与父元素字体的顶端对齐。

vertical-align: text-bottom; 元素底端与父元素字体的底端对齐（为了与上面的super区分开来，给父元素加了一个高于本身高度的 line-height）。

vertical-align: middle; 元素中线与父元素的小写x中线对齐。

vertical-align: top; 元素及其后代的顶端与整行的顶端对齐。

vertical-align: bottom; 元素及其后代的底端与整行的底端对齐。

这里以父元素中的 y 作为参考直接的可以看出给 img 添加 top/bottom/middle 的情况。如果父元素设置了行高会出现什么情况呢？

为什么设置 vertical-align: middle; 能解决高度问题？

举例：

<div>

    <img src="" alt="">

</div>

默认的vertical-align: baseline; 因此会在img与div底部之间有第三格中超出的内容的距离，这个具体的距离和字体的大小也有关系。如果设置图片为vertical-align: middle; 后，图片在父元素内是居中的，此时图片的高度如果大于内容的高度的时候，父元素的高度就会刚好等于图片的高度。

为什么父元素设置 line-height 后 vertical-align: bottom; 会出现如下情况？

这种情况应该是最糟糕的，设置line-height后父元素的基线不那么固定了，但是还是以父元素内文本字体的基线相关，并且随着字体的大小的变化而变化，当字体大小为0的时候才正好与父元素的底部对齐。

表格元素（table/table-cell）

表格元素中我们用到垂直居中的地方应该是比较多的，对于table元素或者是table样式均可以正常向上面的行内元素一样设置对齐方式。

vertical-align: top; 单元格的内边距的上边缘与行的顶端对齐。

vertical-align: middle; 单元格垂直居中。

vertical-align: bottom; 单元格的内边距的下边缘与行的底端对齐。

总结

知识点小，但是真正理解或者说遇见类似对齐的问题问题依然是问题，仔细理解了，下次应该能很好的面对问题了吧。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align