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