为什么无法实现整体居中

代码

<!DOCTYPE html><br><html><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> #max{<br> margin: 0px auto;<br> width: 800px;<br> outline: 1px dotted;<br> padding-left:20px;<br> padding-bottom:20px;<br> box-sizing:border-box;<br><br> }<br> div{<br> margin-right:20px;<br> margin-top:20px;<br> float:left;<br> outline: 1px dotted;<br> }<br> p{<br> margin: 0px ;<br> text-align: left;<br> text-indent:0.3em;<br> box-sizing:border-box;<br> }<br><br> </style><br></head><br><body><br><br><div id="max"><br> <div id="a"><br> <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"><br> <p>欢迎来到慕课网学习知识！</p><br> </div><br> <div id="b"><br> <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"><br> <p>欢迎来到慕课网学习知识！</p><br> </div><br> <div id="c"><br> <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"><br> <p>欢迎来到慕课网学习知识！</p><br> </div><br> <div id="d"><br> <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"><br> <p>欢迎来到慕课网学习知识！</p><br> </div><br> <div id="e"><br> <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"><br> <p>欢迎来到慕课网学习知识！</p><br> </div><br> <div id="f"><br> <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"><br> <p>欢迎来到慕课网学习知识！</p><br> </div><br></div><br></body><br></html><br>

为什么这里设置了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