Fork me on GitHub
代码改变世界

vertical-align属性

2015-11-14 17:06  autrol  阅读(1341)  评论(0编辑  收藏  举报

准备阶段

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