`vertical-align属性与垂直居中`学习笔记

针对inline-block元素的垂直居中

inline-block元素的水平居中和inline元素的垂直居中实现是不一样的。
对于inline元素（比如span）只需要满足元素的line-height等于容器的height值就可以了。但是对于inline-block元素你会发现这招不管用了。
尤其是单个inline-block的情况下经常是line-height和height即使veritical-align:middle也是没有效果的。

到底什么是inline-block元素你能讲清楚吗？

https://developer.mozilla.org/en-US/docs/Web/CSS/display

解释

一个很重要的原因就是元素的基线不是固定的，是可变的。

不理解的话

虽然vertical-align属性只会在inline-block水平的元素上期作用，
但是其影响到的元素涉及到inline属性的元素，
这里千万记住，inline水平元素受vertical-align属性而位置改变等
不是因为其对vertical-align属性敏感或起作用，
而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。

一个line box的高度是的计算方式如下：
line box中的每一个行内元素都将加入到计算过程，如果是元素inline
的则取其line-height
的值，如果元素是inline-block
或者是inline-table
则取其margin-box的高度，最后这些值的最大值，即为line box的高度了。

对于有正文的行内元素而言，它的基线正如上面的栗子中所展示的那样.
那么对于没有正文的行内元素（这里指的是有大小的inline-block元素但没有正文或者类似与img, video
这样的replaced element），它们的基线位于它们margin box的底部。

https://www.google.co.jp/search?q=%E5%9F%BA%E7%BA%BF%E7%9A%84%E4%BD%8D%E7%BD%AE%E5%88%B0%E5%BA%95%E5%9C%A8%E5%93%AA&oq=%E5%9F%BA%E7%BA%BF%E7%9A%84%E4%BD%8D%E7%BD%AE%E5%88%B0%E5%BA%95%E5%9C%A8%E5%93%AA&aqs=chrome..69i57.8766j0j4&sourceid=chrome&ie=UTF-8

参考文献

1. vertical-align属性与垂直居中
2. 位置飘摇不定的inline-block
3. 中文到底有没有基线（baseline）的概念