vertical-align属性

准备阶段

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也无效果）