189 8069 5689

    

    
    为什么？

'vertical-align'
Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom |  |  | inherit
Initial:      baseline
Applies to:      inline-level and 'table-cell' elements
Inherited:      no
Percentages:      refer to the 'line-height' of the element itself
Media:      visual
Computed value:      for  and  the absolute length, otherwise as specified

分析：

父元素.ctn-block的base-line是Gg的baseline，

inline-block元素因为没有内部line box，也没有设置overflow:visible，所以其baseline是底margin边界。

四、vertical-align基于baseline的不同取值

1、baseline

将子元素盒子的baseline与父盒子的baseline对齐。

2、middle

将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐

这里元素盒子的垂直中点容易确定，父盒子的baseline也好确定，但是x-height要进行计算得到，这个x-height就是字母x的高度。

 3、text-top

将盒子的顶端(margin-top边界)与父盒子的文本区域顶端对齐

审查盒子看到margin-top的顶端。

审查文本，看到蓝色区域的上边界就是文本区域顶端。

最终效果就是盒子的顶端与父盒子文本区域顶端对齐。

4、text-bottom

将盒子的底端（margin-bottom边界） 与父盒子的文本区域底端对齐

和text-top类似，不过将子元素的margin-bottom和文本区域的下边界对齐。

5、sub

将子元素盒子的baseline降低，到适当的父盒子的下标位置

子元素的baseline已经确定了，就是margin-bottom下边界，但是父盒子的下标位置太不好理解。。。首先需要了解下标这个概念，我们可以通过_{标签为文字添加下标，将中的内容修改为GgGg，就会有如下效果。}

这里就是将元素的margin-bottom下边界和下标的baseline对齐。

6、super

将元素盒子的baseline升高，到适当的父盒子的上标位置。

与sub对应，super提升到上标内容的baseline处，首先通过^{标签创建上标。}

7、percentage

百分比：升高（正值）或降低（负值）子元素盒子，具体的升高/降低数值由父盒子的line-height的值乘以百分比计算得出。如果百分比为0%，就和vertical-align:baseline一样。

这个是相当好理解的，就相当于子元素盒子的baseline升高或降低，具体数值为百分比乘以父盒子的line-height。

本例中，父盒子的line-height为200px，所以设定25%，元素应该上移50px。

并不是很直观，给它加上一个transform: translate(0, 50px);【相对下移50px】，它又移到那个熟悉的位置了。

8、length

升高（正值）或降低（负值）子元素盒子。值为升高/降低的距离，如果为0，和vertical-align:baseline一样。

以我们最常用的px作为单位，设定vertical-align:50px，效果就和上面百分比为25%（200px*25%=50px）一样了，不做例子了。

五、vertical-align基于line box的不同取值

当vertical-align设置为top和bottom时，其就不是按照baseline进行定位了，而是根据line box进行定位。子元素盒子的顶部和底部也就是其上下margin外边界。

1、top

将子元素盒子的顶部和其所在的line box顶部对齐

由于vertical-align:top将会让子元素盒子顶部与line box顶部对齐，而如果line box高度小于子元素高度，line box将会被撑开。我们先用一个高度较高的元素撑开line box，然后看看效果：

可以看到，big子元素撑开了line box，而child1的margin-top外边界紧贴在line box的顶端。

2、bottom

将子元素盒子的底部和其所在的line box底部对齐

和top类似，由于big用于撑开line box，可以不必修改其vertical-align的值，仅修改child1为vertical-align:bottom，效果：

六、inline元素下方可能会有一点空隙

例子：尝试将li元素在垂直方向上进行对齐的话，这个现象非常常见

    
    
    
        ul{
            background-color: bisque;
        }
        .box { display: inline-block;
            width: 100px;
            height: 100px;
            background-color: aliceblue;
            /*     vertical-align: middle;*/
        }
    





    
    
    

 1、垂直空隙

因为li元素默认vertical-align:baseline，而baseline的下方会给字母的一部分留出空间，因此会产生一个空隙，要产生理想的效果，解决方案就是改变line box的baseline位置，比如将这些li设置为vertical-align:middle。【tip:加一个x效果更明显】

2、水平空隙

li元素的水平空隙是因为换行引起的，这个换行会变成一个空白，这个空白会被解析为DOM中的文本节点。比如像下面酱紫的代码。

效果如下：因为前2个li之间没有空白，而2和3个li之间有空白。

但是上面的代码可读性太差，也不美观，一般这样写

我们用一个注释节点代替空白（文本节点），而注释节点渲染的时候是不渲染的。了解更多DOM中的节点类型，可看我的另一篇文章《DOM》。

七、vertical-align:middle让元素下移而不居中的问题分析

1、问题

现在有三个inline-box块，高度分别为100px，200px，300px，想让高度为100px的块垂直居中，于是写出了如下代码：  

    .ctn-block{
        background-color: #bbb;
    }
    .ctn-block .child {
    display: inline-block;
    width: 100px;
    background-color: aliceblue;
}
.ctn-block .child-1 {
    height: 100px;
/*    vertical-align: middle;*/
}
.ctn-block .child-2 {
    height: 200px;
}
.ctn-block .child-3 {
    height: 300px;
}


    
     
    

给中间div加上vertical-align:middle，效果变为上图二的样子——child-1元素下移了，但是却没有居中。

2、原因

从上面可以指定，vertical-align:middle的定位方式是：将子元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐。

子元素盒子的中点很好算，而父盒子的baseline加上父盒子的x-height一半位置又是什么呢？

首先计算父盒子的baseline：三个子元素的baseline走在一条直线上，就是child-2和child-3的底部。

然后加上父盒子的x-height：由于chrome下默认font-size是16px，而font-family:sans-serif，所以x-height的一半大概是3-4px，综上，按照如下方式对齐：

3、 解决方案

 一种方式是将最高的元素设为vertical-align:middle。

然后将想要居中的也设定为vertical-align:middle，其他的根据需要设定vertical-align:top/bottom。

原理有点抽象：

首先明确一点：最高元素设定为vertical-align:middle后，这个元素对于line box来说，baseline就是其中线。

其他元素设置vertical-align:top/bottom后，它们不影响line box的baseline，所以再将需要设定垂直居中的元素也设定为vertical-align:middle，它们的baseline必然在最高元素的baseline之上，所以会会被强制下移，进行居中。

.ctn-block .child-1 {
        height: 100px;
        vertical-align: middle;
    }
    .ctn-block .child-2 {
        height: 200px;
        vertical-align:top;
    }
    .ctn-block .child-3 {
        height: 300px;
        vertical-align: middle;
    }

4、衍生的一种可行的垂直居中方案

为父元素设定一个伪元素：：after,其高度为父元素的高度，display:inline-block,将其设定为vertical-align:middle即可撑开line box，同时line box的baseline为父元素高度一半的位置。然后设定子元素vertical-align:middle，即可实现居中。

考虑兼容性的话，这里需要使用一些hack，由于IE8不支持::after伪元素，所以需要一个span来替代。而display:inline-block亦需要hack。 

八、其他应用

ico和文字对齐

    .pop-viphead-nologinbox {
        width:500px;
    }

    .pop-viphead-nologin-icon {
        display:inline-block;
        width: 14px;
        height: 14px;
        background: url("images/not_login_tip_ico.png") no-repeat;
    }

    .pop-viphead-nologin-txt {
        display: inline-block;
        color: #333;
        font-size: 12px;
        margin-left:2px;
    }

    .pop-viphead-nologin-btn {
        display: inline-block;
        margin-left: 3px;
    }

    .pop-viphead-nologin-btn a {
        display: block;
        width: 76px;
        height: 25px;
        line-height: 25px;
        color: #fff;
        text-align: center;
        background-color: #00adee;
        border-radius: 1px;
        font-size: 12px;
    }



    
    您还没有登录哦！

    立即登录

我想让左边ico和文字，按钮都对齐。

.pop-viphead-nologin-icon,.pop-viphead-nologin-txt,.pop-viphead-nologin-btn{
        vertical-align: middle;
    }

以上是“css中vertical-align属性有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！