老师，我还是没实现图片上下居中。。margin:auto 0也不行呀？
来源：2-14 编程练习
慕粉8021849
2019-05-28 20:16:23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;
padding:0;
}
.one{background:#99cdfd;
width:800px;
height:500px;
margin:0 auto;
overflow:hidden;
}
.right1{padding:20% 20px;
float:left;}
.left1{padding:20% 20px;
float:left;
}
img{display:block;
}
.two{background:pink;
width:800px;
height:150px;
margin:0 auto;
overflow:hidden;
}
.right2,.left2,.center{padding:50px 30px;
float:left;
}
</style>
</head>
<body>
<div class="one">
<div class="right1"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/></div>
<div class="left1"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"></div>
</div>
<div class="two">
<div class="right2"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"></div>
<div class="center"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"></div>
<div class="left2"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"></div>
</div>
</body>
</html>
1回答
-
同学你好，设置margin居中只能实现水平方向的居中，margin：auto 0；并不能实现垂直居中，可以使用计算的方式。
建议参考：
如果帮助到了你，欢迎采纳~祝学习愉快
0
相似问题