准备阶段
vertical-align取值及含义:
值 | 含义 |
baseline | 默认。元素放置在父元素的基线上。 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
% | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
length | 垂直方向上对齐,负值向下,正值向上 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
注意:vertical-align属性只对行内元素(inline/inline-block)生效。
top/text-top/middle/baseline/text-bottom/bottom
用下图描述这六个属性对应的垂直位置:
接下来进一步验证:
测试代码如下:
<style>
.refer {
color: #fff;
font-size: 32px;
line-height: 64px;
background: #000;
height: 100px;
} .vertical {
font-size: 16px;
line-height: 16px;
display: inline-block;
width: 150px;
height: 20px;
border: 1px solid #fff;
}
</style>
<div class="refer">
line-height: 64px
<span class="vertical" style="vertical-align: top">top</span>
<span class="vertical" style="vertical-align: text-top">text-top</span>
<span class="vertical" style="vertical-align: middle">middle</span>
<span class="vertical" style="vertical-align: baseline">baseline</span>
<span class="vertical" style="vertical-align: text-bottom">text-bottom</span>
<span class="vertical" style="vertical-align: bottom">bottom</span>
</div>
效果如下:
从上面三个图可以得出下面的结论:
1、top:把元素的顶端与行中最高元素的顶端对齐
2、bottm:把元素的底端与行中最低元素的底端对齐
3、text-top:把元素的顶端与父元素字体的顶端对齐
4、text-bottom:把元素的底端与父元素字体的底端对齐
5、middle:把元素放置在父元素的中部
6、baseline:元素内容的底部放置在父元素的基线上(默认值)
注意:用红色文字标示出谁以谁为参照
super/sub
测试代码如下:
<div>
参照物
<sup>上标</sup>
<span style="vertical-align:super">上标</span>
</div>
<div>
参照物
<sub>下标</sub>
<span style="vertical-align:sub">下标</span>
</div>
效果图如下:
从上图可以得出结论:
1、super:元素内容的底部与父元素文字上标的底端对齐
2、sub:元素内容的底部与父元素文字下标的底端对齐
length/%
测试代码如下:
<div>
参照物
<span style="vertical-align:10px">vertical-align:10px</span>
<span style="vertical-align:-10px">vertical-align:-10px</span>
</div>
效果图如下:
从上图可以得出结论:
1、length:元素以原位置为基准,垂直方向移动,可以取正负值
2、%:元素以原位置为基准,取值以父元素的line-height属性为基准,垂直方向移动,可以取正负值(如果父元素的line-height: 0;以"%"设置vertical-align也无效果)