效果没有显示正确，代码哪里不正确吗
来源：3-12 编程练习
siegelions
2020-12-02 09:53:13
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="texxt/css">
img{
width:600px;
margin:0 auto;
}
.left{
width:100px;
height:200px;
float:left;
position:fixed;
left:0px;
top:50%;
margin-top:-100px;
}.right{
width:100px;
height:200px;
float:right;
position:fixed;
right:0px;
top:50%;
margin-top:-100px;
}
</style>
</head>
<body>
<div>
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
</div>
<div class="left"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"></div>
<div class="right"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"></div>
</body>
</html>
2回答
-
同学你好，垂直居中是设置在左右两侧图片的父元素上的，即.left和.right是垂直居中的，并且使用的方式是margin-top:-自身高度的一半：
但是由于图片高度会按照自身宽度自适应，所以图片高度小于父元素的高度：
由于图片与父元素高度不一样，所以父元素垂直居中后，实际上图片并没有垂直居中（图片在父元素中居顶显示，我们看到的是图片，而不是父元素）。
所以给图片设置了高度是100%，含义就是让图片高度与父元素一致，即让图片高200px：
这样就可以让图片也垂直居中了。
祝学习愉快！0 -
好帮手慕久久
2020-12-02
同学你好，代码中有如下问题:
1、style标签的type属性值写错了，多写了一个x，导致样式不生效，修改如下：
2、如下样式会设置所有图片的宽度都是600px：
导致下图中图片的宽度太小，效果不好看：
建议设置图片都是100%显示，如下：
3、左右两侧垂直居中的效果有误差：
原因是图片的高度，默认情况下会自适应，导致图片高小于left高，所以即使left垂直居中了，但是图片并没有垂直居中。
建议设置左右两侧的图片，高度百分百显示：
4、优化建议：
左右两侧元素设置定位后，就不用写浮动了，如下样式多余，可去掉：
祝学习愉快！
0h020-12-02
相似问题