老师怎么让内容能在父容器完全居中，勉强能实现，不知道怎样居中。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="practice4.css">
</head>
<body>
<div id="div0">
<div id="div1"><img src="2.jpg"><p>欢迎来到慕课网</p></div>
<div id="div1"><img src="2.jpg"><p>欢迎来到慕课网</p></div>
<div id="div1"><img src="3.jpg"><p>欢迎来到慕课网</p></div>
<div id="div1"><img src="3.jpg"><p>欢迎来到慕课网</p></div>
<div id="div1"><img src="4.jpg"><p>欢迎来到慕课网</p></div>
<div id="div1"><img src="4.jpg"><p>欢迎来到慕课网</p></div>
</div>
</body>
</html>
#div0{
width: 850px;
height: 400px;
outline: dotted;
padding-top: 20px;
padding-left: 20px;
border-color: gray;
box-sizing: border-box;
}
#div1{
float: left;
margin-right: 20px;
margin-bottom: 20px;
border-style: solid;
vertical-align: bottom;
border-color: gray;
border-width: 0.5px;
}
img{
float: left;
}
p{
text-align: center;
}
正在回答 回答被采纳积分+1
同学你好，
1、父容器和子div的长宽高能让内容在父容器的正中间是通过计算估计得出的，例如老师的代码中图片的宽度为240*3张，也就是720px，图片的外边距为10px，每个图片左右2个外边距，一共3个图片，所以就是60px，每张图片有1px的边框宽度，每个图片左右2个边框，一共3个图片，也就是6px，相加一共为786px，取个整即是790px，设置整体的宽度就为790px，就可以使其居中。
2、老师的代码中清楚浮动的原因是，这里只为子模块设置了浮动，脱离了文档流，而父div没有设置浮动，并且高度设置为auto，为自适应，所以就会导致父元素高度塌陷的问题，所以需要清楚浮动。或者也可以不清楚浮动，将父div也设置浮动，都脱离文档流，就可以保证两个div都可以包裹了。
例如：
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
你好，在css样式中id选择器是唯一的，class没有限制，建议参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕课网</title>
<style type="text/css">
.lists{
width: 790px;
height: auto;
font-family: '微软雅黑';
border: 1px dashed #DDD;
padding: 10px;
}
img{
width:240;
height:135;
}
.son{
width: 240px;
height: 165px;
border: 1px solid #CCC;
float: left;
margin: 10px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="lists">
<div class="son">
<a class="imgs">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
</a>
<div class="inner">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="son">
<a class="imgs">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
</a>
<div class="inner">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="son">
<a class="imgs">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
</a>
<div class="inner">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="son">
<a class="imgs">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
</a>
<div class="inner">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="son">
<a class="imgs">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
</a>
<div class="inner">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="son">
<a class="imgs">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
</a>
<div class="inner">
欢迎来到慕课网学习新知识！
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>如果解决您的问题请采纳，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星