vertical-align学习笔记

vertical-align 支持的四种类型(支持inherit 继承)

- 数值百分比类

vertical-align起作用的前提

vertical-align应用于inline水平和table-cell元素

- block不生效



- 间接改变元素属性，vertical-align也会失效，如float，absoulate

• table-cell(作用于自身)元素
  

vertical-align与line-height

vertical-align垂直居中

text-top和text-bottom

与父元素字体大小有关，不受行高以及其他内联元素影响

vertical-align上标下标类

1. html中的上标:<sup>类似于vertical-align:supper
2. html中的下标:<sub>类似于vertical-align:sub

v-a前后元素不会直接影响，但是会通过改变父级影响前后元素

vertical-align的实际应用

1. 
   
2. 小图标文字对齐,兼容性比较好
   
3. 个数不定的文字内容和不定尺寸图片垂直居中对齐
   
   
   
   
   

display:inline-block;具有收缩特性，由于这里i标签什么内容都没有，所以天然的宽度为0