为什么无法实现整体居中

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #max{
            margin: 0px auto;
            width: 800px;
            outline: 1px dotted;
            padding-left:20px;
            padding-bottom:20px;
            box-sizing:border-box;

        }
        div{
            margin-right:20px;
            margin-top:20px;
            float:left;
            outline: 1px dotted;
        }
        p{
            margin: 0px ;
            text-align: left;
            text-indent:0.3em;
            box-sizing:border-box;
        }

    </style>
</head>
<body>
<!-- 此处写代码 -->
<div id="max">
    <div id="a">
        <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
        <p>欢迎来到慕课网学习知识！</p>
    </div>
    <div id="b">
        <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
        <p>欢迎来到慕课网学习知识！</p>
    </div>
    <div id="c">
        <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
        <p>欢迎来到慕课网学习知识！</p>
    </div>
    <div id="d">
        <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
        <p>欢迎来到慕课网学习知识！</p>
    </div>
    <div id="e">
        <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
        <p>欢迎来到慕课网学习知识！</p>
    </div>
    <div id="f">
        <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
        <p>欢迎来到慕课网学习知识！</p>
    </div>
</div>
</body>
</html>

为什么这里设置了auto，最外面那个不能居中？

一娆Hacker 2021-01-23

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

收起

2回答

好帮手慕阿慧 2021-01-23 18:19:39

同学你好，

1、可以直接设置#max。div{}是设置所有div标签的样式，这样也会设置最外面那个大的div的样式，会让最大的div浮动。同学代码运行效果如下：

最大的div浮动之后，margin: 0 auto;就失效了，div不会居中。

2、同学想要设置6个小div的样式应该使用#max div，这使用了css选择器中的空格选择器，

如下：

关于空格选择器，同学可以回顾一下之前课程CSS其他选择器，课程链接为https://class.imooc.com/lesson/1355#mid=31721

祝学习愉快~

收起回答

好帮手慕阿慧 2021-01-23 15:35:35

同学你好，同学设置了div标签样式，所以最外面的div不会居中，建议同学改为#max div表示设置id为max元素下的所有div，再处理一下浮动。

参考代码如下：

祝学习愉快~

收起回答

提问者一娆Hacker #1

按老师说的改，确实实现了功能，但是我不懂啥意思

在div前 + #max是啥意思啊
我设置div是统一设置，把大的div里面的小div也按照这个形式

而且我的大的div的id名字就是max
我在#max{}里面设置了 auto它就应该让最外面的div居中啊

2021-01-23 15:44:22
提问者一娆Hacker #2

id为max元素下所有div？？？我这里只有一个id为max的div，就是最外面那个大的div
max中包含了6个小的div。
为什么不直接设置#max{}呢
而且剩下的6个小div的 id也不是max啊，这也不就不能设置他们的属性了吗

2021-01-23 15:53:18