适用场景
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
则以自身内容的最底部对齐与父元素内容的最顶部