css vertical-align属性详解

适用场景

vertical-align属性设置元素的对齐方式，只有具备以下两种属性的元素设置vertical-align后才起作用：

1. display:inline
2. display:inline-block

属性介绍

HTML：

<p>xxxxxxxxxxxxx<span>Lorem ipsum dolor</span></p>

CSS：

        p{
            height: 100px;
            width: 300px;
            border: thin solid;
            line-height: 50px;
            background-color: #dbdbdb;
        }
        span{
            color: #ff2118;
        }

1. 为span添加属性： vertical-align:base-line

以父元素的基线位置对齐，即span元素底部与父元素中英文小写x的下沿。

2. 为span添加属性： vertical-align:bottom|top

span 未设置line-height时其vertical-align:bottom|top和父元素内容中心对齐，当span设置line-height时，vertical-align:bottom其以父元素的line-height为标准，显示在line-height范围内的最右上，而父元素显示在line-height范围内的最左下：

span{
            color: #ff2118;
            vertical-align:bottom;
            line-height:100px;

    }

而span设置line-height时，vertical-align:top中span元素内容位置不变，只是父元素显示在左上而已：

3. 为span添加属性： vertical-align:text-bottom

则以自身内容的最底部对齐与父元素内容的最顶部

3.为span添加属性： vertical-align:text-top