老是这样写可以吗

来源:4-3 编程练习

银野

2020-11-21 13:47:40

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.under{
width:100%;
height:4033px;
}
.left,.right{
position:fixed;
height:296px;
width:182px;
}
.left{
left:0;
top:50%;
margin-top:-148px;
}
.right{
right:0;
top:50%;
margin-top:-148px;
}
</style>
</head>
<body>
<div class="under">
<img src="http://img1.sycdn.imooc.com\/climg/59c9f7ce0001839219034033.png"/>
</div>
<div class="left">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"/>
</div>
<div class="right">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"/>
</div>
</body>
</html>


写回答

1回答

好帮手慕慕子

2020-11-21

同学你好,思路是可以的,但是由于图片自身宽高超出了盒子,导致垂直居中存在误差,如下图所示:

http://img.mukewang.com/climg/5fb8afed09d3a99203790524.jpg

建议:调整图片的宽高与外层盒子保持一致。

http://img.mukewang.com/climg/5fb8b021098bfdf902670161.jpg

建议优化:top和margin-top属性值一样,可以写在一起,简化代码书写。

http://img.mukewang.com/climg/5fb8b05209b51c5805520587.jpg

祝学习愉快~


0

0 学习 · 40143 问题

查看课程