css中的vertical-align与line-height

标签：sel   推导   理解   bottom   height   ble   垂直居中   之间   ext   

　　line-height的定义是两基线之间的距离，即一行的高度（字面意思就是行高啊）；而vertical-align的值，top，middle，baseline，bottom，顾名思义就是上线对齐，中线对齐，基线对齐，底线对齐（与英语本的线有些不同），输入一个x，其底部就是基线，中间就是中线。（中线并不是就是垂直中心，而是x的中心，使用vertical-align：middle对齐时，表面上看是垂直水平居中对齐，实际上会有像素级别的差距，可以将font-size设置为0，这样各种线都重合，居于垂直居中的地方）

　　对于inline-block元素，当行盒子的正常流中没有行内盒子，且其overflow设置为visible，则以margin作为基线，如果以默认的vertical-align: baseline对齐的话，就会以margin进行对齐。这种对齐产生的效果自己测试对应着vertical-align的意义就能够推导出来，不进行赘述。

对于line-height，vertical-align产生的各种效果，理解其原本的意思，就不难理解效果的又来了，下面写上vertical-align：text-top以及text-bottom的用法。

vertical-align：middle等，对齐所依赖的线是处于同级元素，具有不确定性（不过也可以根据这种特性制造出上下块偏移的效果）而text-top，bottom是根据父级元素的font-size确定各种线的位置进行对齐。

未完待续。。。

css中的vertical-align与line-height

标签：sel   推导   理解   bottom   height   ble   垂直居中   之间   ext   

原文地址：http://www.cnblogs.com/ZackBee/p/6764363.html