整体居中没弄好
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{
margin:0;
padding:0;
}
a {
text-decoration: none;
}
.container{
width:800px;
padding:20px;
margin:0 auto;/*页面中左右居中 */
font-family:'微软雅黑';
font-size:16px;
border:1px dashed lightgray;
}
.content{
width:800px;
overflow:hidden;/*清除浮动*/
zoom:1;/*兼容低版本的ie*/
margin:0 auto;/*页面中左右居中 */
}
.top1{
float:left;
margin-right:15px;
border:1px solid lightgray;
}
.top2{
float:left;
margin-right:15px;
border:1px solid lightgray;
}
.top3{
float:left;
border:1px solid lightgray;
}
.bottom1{
float:left;
margin-right:15px;
border:1px solid lightgray;
}
.bottom2{
float:left;
margin-right:15px;
border:1px solid lightgray;
}
.bottom3{
float:left;
border:1px solid lightgray;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="content">
<div class="top1">
<div class="logo1"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></img></a>
</div>
<div class="text1">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="top2">
<div class="logo2"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></img></a>
</div>
<div class="text2">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="top3">
<div class="logo3"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></img></a>
</div>
<div class="text3">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="bottom1">
<div class="logo4"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></img></a>
</div>
<div class="text4">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="bottom2">
<div class="logo5"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></img></a>
</div>
<div class="text5">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="bottom3">
<div class="logo6"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></img></a>
</div>
<div class="text6">
欢迎来到慕课网学习新知识！
</div>
</div>
</div>
</div>
</body>
</html>
正在回答
同学你好，如果将container的宽度变成900px；需要给top和buttom加上margin: 0 auto;使其居中，如果都换成width：900px；适当增大.img的margin，使其达到居中的效果。如果想整体效果居中，可以使用适当百分比设置margin居中。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快！
同学你好，同学的整体居中使用的margin: 0 auto ;使其正好水平居中，不错。但是图片左右不居中。另外图片的样式都相同，建议设置为相同的名字一起设置。还可以将图片分为上下两个大的div，每个大的div中放三个小的div。设置居中可以调整margin。可参考如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 785px;
border-style: dashed ;
border-color: #aaaaaa;
margin: 0 auto;
}
.top {
width: 785px;
overflow: hidden;
zoom: 1;
}
.img {
float: left;
margin: 10px;
text-align: center;
}
.bottom {
width: 785px;
overflow: hidden;
zoom: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="img">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="bottom">
<div class="img">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="img">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</div>
</body>
</html>如果我的回答解决了你的疑惑，请采纳。祝：学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星