請老師看有沒有要改進的地方，和問一個問題
来源：3-4 编程练习
weixin_慕雪0272820
2020-06-08 14:08:55
再請問為什麼.contain的margin需要設成100px auto 才能使contain垂直居中顯示呢?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{margin: 0; padding:0; }
.contain{width :840px ; overflow: hidden ;border: 1px #cccccc dashed ; margin: 0px auto; }
.contain div{float: left; margin: 15px ;border: 1px #cccccc solid ;}
</style>
</head>
<body>
<div class="contain">
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>歡迎來到幕課網學習新知識!!</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>歡迎來到幕課網學習新知識!!</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>歡迎來到幕課網學習新知識!!</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>歡迎來到幕課網學習新知識!!</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>歡迎來到幕課網學習新知識!!</p>
</div>
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>歡迎來到幕課網學習新知識!!</p>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，关于同学的问题回答如下：
1、图片最右侧的间隙过大，可以再调整一下：
因为每一列占据的宽度是272px（宽度240+左右2px的边框+左右30px的margin），所以三列的宽度是816px：
2、老师给contain设置了margin: 100px auto，并没有实现垂直居中显示：
margin: 100px auto代表的上下margin是100px，左右margin为auto，所以只能实现水平居中，垂直就不一定了。我们在后面会学习怎么实现垂直居中显示：
同学可以先往后学习呢。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
0
相似问题