首页 > 代码库 > css中的vertical-align与line-height

css中的vertical-align与line-height

  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