span/p水平垂直居中 --＞ line-height失效问题
发布时间
阅读量：
阅读量
HTML：
<div class="test">
<span class="test2">
Hi! Click me
</span>
</div>CSS:
.test{
height: 50px;
width:500px;
border:1px solid;
}
.test2{
height: 50px;
width:500px;
display: inline-block;
text-align: center;
line-height: 50px;
}满足以下条件即可水平垂直居中：
- 设置display属性为inline-block。
- 通过设置text-align属性实现居中显示。
- 将line-height属性设置为true，并使各行高度与span的高度一致。
- 确保span的高度与父级高度一致，并在此场景中使用div作为测试元素。
如果span的高度和其父级的高度不一致，line-height就会失效
全部评论 (0)
还没有任何评论哟~