这篇内联元素的vertical-align的文章承接前两篇文章
从头到尾，我们都试图在梳理清楚内联元素中一些较为重要的概念，其中一个很主要的目的，就是为了解决内联元素的对齐问题。对于很多前端开发来说，对齐问题一直是一个非常常见，但有时候又让我们感到非常困惑的问题。在这篇文章里我会用最简洁的解释来解释内联元素到底是怎么回事。这篇换个形式，我们用几个问答来说明关键问题。
内联元素的对齐主要由哪些属性影响
我们以下所说的对齐主要是针对内联元素的。我们都知道CSS最后展现在界面中的结果，经常是由多个属性共同作用的结果。对齐主要是由font-size，line-height和vertical-align这三个属性共同作用的结果，这也是为什么我分了三篇来讲。
内联水平元素的baseline是什么
vertical-align属性有非常多的值，它的默认值是baseline即相对于基线对齐。基线的概念我们在font-size那部分也说过，那里解释的是文字的基线。那么对于一个display: inline-block，并且拥有固定宽和高的元素来说，它的基线是什么那？我可能问了一个很蠢的问题，很多人应该都知道，它的基线就是其margin-box即该元素的底部边界（包括margin）。如图所示，
但是如果在该元素中其中加入文字，它的基线还是底边界吗？实践出真知，我们还是用实例来看下。
这种情况这个在css2.1规范里有提及，The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
意思就是inline-block如果有overflow非visible的属性或者没有其中任何行盒那么它的基线就是底部的margin边界否则的话它的基线就是其中最后一个行盒的基线。(tip: 行盒的概念在第一篇文章中也有介绍)。
实例
下面我们要实现一个定宽高的div在容器中垂直水平居中的效果，当然有很多方法，我们这里只利用内联元素的特性来实现，来说明内联元素的对齐原理，点我看实例。
先来看实例中的第一个，我们将box元素设置为inline-block水平，然后使用text-align: center让其水平居中，(base元素中x用来辅助观察父容器的基线位置，实际应用中不应该存在)，然后将box的text-align属性设置为vertical-align: middle。emm...，然而并没有垂直居中，这是为什么哪？
这里我们首先要知道vertical-align: middle是相对于谁来对齐，前面的文章也提到过，vertical-align: middle是会将元素的中心点与父容器基线向上1/2x-height的位置对齐。在我们第一个例子中，随着我们设置vertical-align的值，父容器的基线位置在不停的变化。由于我们要实现垂直居中的效果，所有我们需要父容器的的基线能够在容器的中央。
现在我们需要使用一个附中元素将父容器的基线撑开，这里使用父容器的:after伪元素来做一个辅助元素，具体看实例的第二个设置其高于父容器一致，并设置其veritcal-align: middle。这样父容器的基线就会在容器垂直正中央偏下1/2x-height的位置，box的中心线与基线加上1/2的位置对齐，正好在中央。现在垂直居中已经实现了。
但是我们这里还有一个问题，仔细观察会发现该box元素水平并没有完全水平居中。给辅助元素设置了1px宽度和背景颜色后我们很容易看出问题原因，这是由于内联元素间的间隙造成的。要解决这个间隙，我们使用最简单的方法，设置父容器的font-size: 0，最后我们的水平垂直居中效果如实例中第三个所示。
总结
到这篇文章为止，关于内联元素几个比较重要的属性以及内联元素对齐的知识也差不多讲完了，可能里面还有一些很细节的部分没有说到，这就要大家以后多多发挥google的功效了。
初始学习css，感觉css是一个非常简单的东西，一天就能用css写出一些网页效果。但当慢慢深入的时候，会发现这是一个非常非常复杂的东西，这才是真正实践了什么叫”入门容易，精通难“。这是我自己学习css到现在一个最大的感受。总之，css学习之路还有很长，前端之路学习之路还有很长。当真正能够独立解决并解释所有别人提出的所以前端方面的问题，或许是前端无敌吧。又写了些废话，突然有感而发，这里与诸君共勉之~，共同努力。原文链接
