用margin:auto auto;无法使图片居中
html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;margin:0;}
.top{width:900px;
height:500px;
background:pink;
margin:0 auto;
overflow:hidden;
zoom:1;
}
.bottom{width:900px;
height:200px;
background:blue;
overflow:hidden;
margin:0 auto;
zoom:1;
}
.q{float:left;
width:50%;
height:100%;
}
.w{float:right;
width:50%;
height:100%;
}
.e{float:left;
width:300px;
height:100%}
img{margin:0 auto;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<div class="q"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/></div>
<div class="w"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/></div>
</div>
<div class="bottom">
<div class="e"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/></div>
<div class="e"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/></div>
<div class="e"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/></div>
</div>
</body>
</html>0
收起
正在回答
2回答
同学你好，1、使用margin:auto auto;设置居中的话，需要结合定位来设置，后面在讲定位的课程中会讲到哦。
2、另，这个题中的话，调整图片的上外边距即可哦，在设置盒子高度，有知道图片高的情况下，使用盒子的高度-图片的高度，然后结果在除2，得到的值设置为图片的高度就可以了，例：
3、这里是设置图片与图片之间，图片与边框之间的间距都相等，这里设置图片居中的话，并没有达到效果图的效果哦，如下，这里是图片水平居中的效果，但是效果图的这三个间距都相等哦。
以顶部为例：建议：（1）建议：可以把盒子的宽高设置与图片的宽高一致。
（2）左右两个样式相同，建议：可以统一设置。
（3）图片宽360px，所以盒子可以设置的宽设置为360px;两个盒子就是720px，大盒子的宽是900px。900-720 = 180；剩余的180px分隔为3分（因为两个图片之间有三个空格，如上图），一个占据60，所以可以设置图片的左外边距为60px；
（4）盒子的高度可以设置214,500-214 = 286；286/2 =143px，所以上外边距可以设置为143px，例：
下部分，可以参考这个方式实现以下。
希望能帮助到你，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星