这样实现对不对
来源：2-5 编程练习
我叫壹陆伍
2021-01-08 23:29:53
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.top{width:500px;height:200px;background:#9195A3;}
p{color:#fff;width:250px;height:100px;font-size:20px;position:absolute;top:50px;left:130px;margin-top:20px;}
span{margin-left:40px;}
</style>
</head>
<body>
<div class="top">
<p>欢迎大家来到慕课网学习！<br/>
<span>来到慕课网学习！</span></p>
</div>
</body>
</html>
写回答
1回答
-
好帮手慕星星
2021-01-09
同学你好，文字没有实现水平和垂直居中显示
1、水平方向上大盒子宽度为500px，文字宽度为250px，那么如果想居中，左侧的间距应该是（500-250）/2=125px ，而不是130px
2、垂直方向上建议不给文字设置高度，让文字撑起来，这样好计算一些
3、span不设置固定左侧间距，不能保证居中显示，给p设置文本居中即可
参考修改：
祝学习愉快！
0
相似问题