老师怎么让内容能在父容器完全居中，勉强能实现，不知道怎样居中。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<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="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;

}

text-align: center;

}

SomnusL 2020-02-29

源自：CSS浮动 4-12 编程练习

收起

2回答

好帮手慕酷酷 2020-03-01 14:41:30

同学你好，

1、父容器和子div的长宽高能让内容在父容器的正中间是通过计算估计得出的，例如老师的代码中图片的宽度为240*3张，也就是720px，图片的外边距为10px，每个图片左右2个外边距，一共3个图片，所以就是60px，每张图片有1px的边框宽度，每个图片左右2个边框，一共3个图片，也就是6px，相加一共为786px，取个整即是790px，设置整体的宽度就为790px，就可以使其居中。

2、老师的代码中清楚浮动的原因是，这里只为子模块设置了浮动，脱离了文档流，而父div没有设置浮动，并且高度设置为auto，为自适应，所以就会导致父元素高度塌陷的问题，所以需要清楚浮动。或者也可以不清楚浮动，将父div也设置浮动，都脱离文档流，就可以保证两个div都可以包裹了。

例如：

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

收起回答

guly 2020-02-29 14:50:16

你好，在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>

如果解决您的问题请采纳，祝学习愉快！

收起回答