老师，请教下。
来源：3-4 编程练习
慕先生5317166
2019-01-14 17:44:12
1、为什么main里设置margin：0 auto；不能使框架里的所有内容居中？
2、代码还能优化吗，感觉写的有点复杂。
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<meta charset="utf-8">
<style>
* {
margin:0;
padding: 0;
}
.main {
margin: 0 auto;
width: 1000px;
padding: 20px;
border: 1px dashed gray;
overflow:hidden;
}
.img1,.img2,.img3{
margin:10px;
border: 1px solid gray;
text-align: center;
float:left;
}
.img4,.img5,.img6 {
margin:10px;
border: 1px solid gray;
text-align: center;
float:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="main">
<div>
<div class="img1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="img2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="img3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
<div>
<div class="img4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="img5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="img6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</div>
</body>
</html>写回答
1回答
-
您好，设置main的margin居中，是将整个main居中在了页面上，但main内部是不会居中的。想让内部居中可以在img1外层的div上设置margin样式。
如果样式相同，那么设置同名的class设置即可，不用重复写样式。
<!DOCTYPE html> <html> <head> <!-- 此处编写样式 --> <meta charset="utf-8"> <style> * { margin:0; padding: 0; } .main { margin: 0 auto; width: 1000px; padding: 20px; border: 1px dashed gray; overflow:hidden; } .img1{ margin:10px; border: 1px solid gray; text-align: center; float:left; } .test{ width:800px; margin:0 auto; } </style> </head> <body> <!-- 此处写代码 --> <div class="main"> <div class="test"> <div class="img1"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" /> <p>欢迎来到慕课网学习新知识</p> </div> <div class="img1"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" /> <p>欢迎来到慕课网学习新知识</p> </div> <div class="img1"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" /> <p>欢迎来到慕课网学习新知识</p> </div> </div> <div class="test"> <div class="img1"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" /> <p>欢迎来到慕课网学习新知识</p> </div> <div class="img1"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" /> <p>欢迎来到慕课网学习新知识</p> </div> <div class="img1"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" /> <p>欢迎来到慕课网学习新知识</p> </div> </div> </div> </body> </html>如果解决了您的问题，请采纳。祝学习愉快！
0
相似问题