基线、行高相关概念的理解、行内元素的对齐问题、vertical-align的使用

1、水平方向

水平方向用text-align（left、right、center等）设置该行内各个字体元素从父元素的哪里开始。

2、垂直方向

 

行内元素默认是相对于父元素，以父元素的基线对齐的

各种元素的基线位置

（1）inline内联级元素，以元素内的最后一个行内元素的基线为自己的基线

（2）块级元素，以元素内的最后一个行内元素的基线作为自己的基线

（3）inline-block元素，元素内部没有行内元素时，以下外边框为基线，有的话以元素内的最后一个行内元素的基线作为自己的基线。

（4）图片（img标签）以图片的下边框作为基线。

默认行内元素是以父元素的基线作为垂直对齐的基准，可以用vertical-align（注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素）改变元素的对齐基准

vertical-align：baseline/top/middle/bottom/sub/text-top

相对父元素的值

这些值使元素相对其父元素垂直对齐：

baseline

使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如<textarea> ，这意味着这些元素使用此值的表现因浏览器而异。

sub

使元素的基线与父元素的下标基线对齐。

super

使元素的基线与父元素的上标基线对齐。

text-top

使元素的顶部与父元素的字体顶部对齐。

text-bottom

使元素的底部与父元素的字体底部对齐。

middle

使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。

<length>

使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。

<percentage>

使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。

相对行的值

下列值使元素相对整行垂直对齐：

top

使元素及其后代元素的顶部与整行的顶部对齐。

bottom

使元素及其后代元素的底部与整行的底部对齐。

没有基线的元素，使用外边距的下边缘替代。

表格单元格的值

baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)

使单元格的基线，与该行中所有以基线对齐的其它单元格的基线对齐。

top

使单元格内边距的上边缘与该行顶部对齐。

middle

使单元格内边距盒模型在该行内居中对齐。

bottom

使单元格内边距的下边缘与该行底部对齐。