老师帮忙看一下有没有什么问题，还有为什么我的大容器中的内容没有居中
我在大容器里添加text-align:center;为什么内容无法居中，还有我清除浮动的方法有没有什么问题
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!-- 此处编写样式 -->
<style type="text/css">
*{
margin:0;
padding:0;
}
.container{
width:860px;
border:2px #eee dashed;
text-align:center;
overflow:hidden;
zoom:1;
}
.one,.two,.three,.four,.five,.six{
margin:10px;
border:1px #eee solid;
width:260px;
height:180px;
float:left;
}
img{
width:100%;
}
p{
margin-left:10px;
font-size:16px;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="one">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="two">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="three">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="four">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="five">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="six">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/></a>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>
正在回答
因为大容器设置了宽度 , 当里面内容没有完全铺完 看起来就没居中 , text-align:center是为文本设置居中 , 所以不会使大容器居中哦 .可以如下修改宽度 ,并加入padding ,
去掉如下盒子宽度 :
完善一下吧 ,祝学习愉快 ,望采纳
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.parent{
width:808px;
margin: 0 auto;
border: 1px dashed #eee;
overflow:hidden;
}
.one{
width: 766px;
margin:20px;
}
.left,.middle,.right{
width:240px;
border: 1px solid #eee;
margin-right:20px;
margin-bottom: 20px;
}
.right{margin-right:0;}
.left{
float:left;
}
.middle{
float:left;
}
.right{
float:right;
}
img{
width: 240px;
height: 135px;
display: block;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">
<div class="left">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="1" />
<p>欢迎来慕课网学习新知识</p>
</div>
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="2" />
<p>欢迎来慕课网学习新知识</p>
</div>
<div class="right">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="3" />
<p>欢迎来慕课网学习新知识</p>
</div>
</div>
<div class="one">
<div class="left">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="1" />
<p>欢迎来慕课网学习新知识</p>
</div>
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="2" />
<p>欢迎来慕课网学习新知识</p>
</div>
<div class="right">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="3" />
<p>欢迎来慕课网学习新知识</p>
</div>
</div>
</div>
</body>
</html>
我的倒是跟练习要求一致，但是觉得可能哪里还可以再简化一下，供你参考吧
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星