方法一:利用line-height与text-align
1)css部分
<style>
.box {
height: 100px;
color:#fff;
background-color: lightskyblue;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
</style>
2)html部分
<div class="box">
<span>hello world</span>
</div>
3)效果展示
方法二:利用vertical-align和text-align
原理:给class为box的div追加一个子元素,让其高度与父元素高度相同,通过vertical-align使其与文本的1/2处对齐。
1)css部分
<style>
.box {
height: 100px;
color:#fff;
background-color: lightseagreen;
text-align: center;
/* line-height: 100px; */
/* vertical-align: middle; */
}
.box::after{
content: '';
display: inline-block;
height: 100px;
vertical-align: middle;
}
</style>
2)html部分
<div class="box">
<span>hello world</span>
</div>
3)效果展示
声明:本站所有文章,如无特殊说明或标注,均为网络收集发布。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。