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上标下标类
- html中的上标:
<sup>
类似于vertical-align:supper - html中的下标:
<sub>
类似于vertical-align:sub
v-a前后元素不会直接影响,但是会通过改变父级影响前后元素
vertical-align的实际应用
- 小图标文字对齐,兼容性比较好
- 个数不定的文字内容和不定尺寸图片垂直居中对齐
display:inline-block;具有收缩特性,由于这里i标签什么内容都没有,所以天然的宽度为0