理解了这三个概念之后，vertical-align样式就小菜一碟了，不过在此之前，还有几个问题要告诉大家**如何确定父元素的基线**：左边第一个unstyled子元素文本的底部，确定父元素的基线**如何确定父元素的字体高度**：第一个unstyled子元素的高度left，确定父元素的字体高度这个概念比较迷惑，不要惊慌，接下来进入实战，用例子加强概念的理解实战topbottom对齐top，bottom是子元素相对的对齐方式到行框的顶部和底部。那么，很明显，一，二，设置为顶部对齐，三设置为底部对齐text-toptext-bottomalignmenttext-top,text-bottom是子元素相对于父元素字体空间的上下对齐。从概念上看，红线是父元素的字体空间，所以很容易判断，二是文本顶部对齐，三、四是文本底部对齐可能会出现这样一种情况，行框的内容垂直居中，子元素的高度占了行框的高度，例子中的四个就是这种情况。因为高度为四，设置vertical-align本身就没有移动的余地，基线要移动才能满足对齐。上图实现了子元素的垂直居中，黑线为中间线。对比上一张图（中间对齐），不难发现基线和中线都向上偏移了。其他方法也会产生基线偏移的效果，读者可以自行尝试。总结因为用的不多，其他对齐方式就不举例了。不过，只要理解了线框、基线、中心线的概念，其他参数处理起来也很简单。参见垂直对齐：vertical-align属性【翻译】关于vertical-align你应该知道的一切