第五回:深入理解vertical-align文本类属性值

——说说vertical-align:text-top/text-bottom

定义

  1. vertical-align:text-top

    盒子的顶部和父级content area的顶部对齐。

  2. vertical-align:text-bottom

    盒子的低部和父级content area的低部对齐。

20px 24px 32px 40px

20px 24px 32px 40px

父级的font-size大小:

盒子的顶部(底部)和父级content area的顶部(底部)对齐

  1. 元素vertical-align垂直对齐的位置与前后的元素都没有关系;
  2. 元素vertical-align垂直对齐的位置与行高line-height没有关系,至于字体大小font-size有关;

20px 24px 32px 40px

20px 24px 32px 40px

行高(0↔50)(36):

20px文字vertical-align:

实际作用

表情图片(或原始尺寸背景图标)与文字的对齐效果。

龇牙咧嘴(vertical-align:baseline)

  • 使用基线的问题在于图标偏上;
  • 使用顶线/底线的问题在于收其他内联元素影响,造成巨大定位偏差;
  • 使用中线也是不错的选择,但需要恰好的字体大小以及兼容性要求不高;
  • 使用文本底部较合适,不受行高以及其他内联元素影响;

下回预告:深入理解vertical-align上标下标类

——也就是vertical-align:sub/super;