用margin:auto auto;无法使图片居中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 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积分~
来为老师/同学的回答评分吧