vertical-align的运用笔记
七娃博客111人阅读
vertical-align设置“行内”元素的垂直对齐方式,一定要注意是行内块才会生效
1.vertical-align的默认值
- baseline 默认。元素放置在父元素的基线上。
- sub 垂直对齐文本的下标。
- super 垂直对齐文本的上标
- top 把元素的顶端与行中最高元素的顶端对齐
- text-top 把元素的顶端与父元素字体的顶端对齐
- middle 把此元素放置在父元素的中部。
- bottom 把元素的顶端与行中最低的元素的顶端对齐。
- text-bottom 把元素的底端与父元素字体的底端对齐。
- length
- % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
- inherit 规定应该从父元素继承 vertical-align 属性的值。
2.实际效果
默认:baseline
123
9999
top
123
9999
text-top
123
9999
middle
123
9999
bottom
123
9999
text-bottom
123
9999
sub下标
1239999
super上标
1239999
20px——百分比值越大,越向上,与基线越来越远
123
9999
80%——百分比值越大,越向上,与基线越来越远
123
9999