请问如何设置6个模块整体居中在盒子中？麻烦老师看看代码有没有需要改进的。
来源：3-4 编程练习
空空空大师
2019-03-29 19:37:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class</title>
<!-- 此处编写样式 -->
<style text="text/css">
*{margin:0;
padding:0;}
.container{margin:0 auto;
width:800px;
border:1px #ccc dashed;
overflow:hidden;
zoom:1
text-align:center;
}
.module1,.module2,.module3,.module4,.module5,.module6{width:240px;
border:1px #cfcfcf solid;
float:left;
margin:10px;
}
.content1,.content2,.content3,.content4,.content5,.content6{margin:2px;}
</style>
</head>
<body>
<div class="container">
<div class="module1">
<div class="pic1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<div class="content1">欢迎来到慕课网学习新知识!</div>
</div>
<div class="module2">
<div class="pic2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div class="content2">欢迎来到慕课网学习新知识!</div>
</div>
<div class="module3">
<div class="pic3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div class="content3">欢迎来到慕课网学习新知识!</div>
</div>
<div class="module4">
<div class="pic4"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<div class="content4">欢迎来到慕课网学习新知识!</div>
</div>
<div class="module5">
<div class="pic5"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div class="content5">欢迎来到慕课网学习新知识!</div>
</div>
<div class="module6">
<div class="pic6"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div class="content6">欢迎来到慕课网学习新知识!</div>
</div>
</div>
<!-- 此处写代码 -->
</body>
</html>
1回答
-
樱桃小胖子
2019-03-31
1、代码中缺少结束的分号：
2、小盒子没有在大盒子中居中显示
原因是宽度设置的过宽导致的，解决办法：
3、整体居中显示：
希望可以帮到你！
0
相似问题
回答 2
回答 2
回答 3
回答 2
回答 1