4-5编程？元素居中的冲突问题

来源：4-7 编程练习

a1376743421

2018-05-03 13:31:50

*{margin:0;padding:0;list-style-type:none;}
div.big{text-align:center;}
h3{background:#dbdbdb;padding:8px;border:thin solid #BDC4DE;margin-left:30%;margin-right:30%;}
ul{display:none;}
.div1:hover ul{display:block;}
.div2:hover ul{display:block;}
.div3:hover ul{display:block;}

这是我最先写的代码，后来发现不论给哪里（ul或相对应的class值）添加border属性，弹出的列表都没有边框。

当改变h3的属性定义之后，即：

h3{width:100px;border:1px solid pink;}         
 ul{display:none;width:100px;border:1px solid pink;}

结果又不居中显示

但是加上“margin:quto;"之后，又可以居中显示。这是为何？

h3{width:100px;border:1px solid pink;margin:auto}         
 ul{display:none;width:100px;border:1px solid pink;margin:auto;}

写回答

3回答

小于飞飞

2018-05-03

已采纳

替换第二段代码后，外侧和里层的div 没有设置宽度，所以默认充满整个容器。text-align 只是对文字进行居中，所以没有实现整体居中，里面h3 和 ul 设置了宽度，设置了margin值后，使其针对父元素居中，希望解答你的疑惑，欢迎采纳，加油！

h1376743421

h 大概~略略微微~可可能能的稍稍微微了解了

h018-05-03

共1条回复

a1376743421

提问者

2018-05-03

补充：最先的那段代码，补充border属性后可以显示边框。问题就是下面那两段代码，关于margin的问题

小于飞飞

2018-05-03

第一个问题，外层添加固定宽度，给ul 添加相应的边框，可以实现二级菜单有边框：

第二个问题，如果居中，外层div设置宽度同时设置margin：

主要原因是因为没有具体宽度，默认充满整个页面，在思考下，动手实践，加油！

h1376743421

h 那既然div默认充满整个页面，且text-align:center;（内容针对元素居中），为何不居中现实

h018-05-03

共1条回复

0 学习 · 36712 问题

查看课程

相似问题

4-7 编程练习，为什么“.big{margin:0 auto;}”不能实现整体居中？

回答 1

4-5编程练习

回答 1

子元素margin-top问题

回答 2

4-1老师就视频中的display案例提出几个问题？

回答 1

span元素的宽由它中间的内容决定

回答 2

打开慕课网App查看更多内容