问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为何margin:0 auto不起作用了？

头像
luofeiyu
    1.6k29323678
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="head">set in middle and center</div>
    <div id="main">
        <img src="image/i1.png" alt="">
    </div>
    
</body>
</html>

    下面的css

    *{
    padding:0;
    margin:0;
    text-decoration:none;
}
#head{
    width:600px;
    height:40px;
    border:1px solid red;
    margin:0 auto;
    line-height:40px;
    font-size:20px;
    text-align:center;
}

#main{
    width:600px;
    height:392px;
    border:1px solid green;
    margin:0 auto;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}

    虽然里面的图片居中了，但是，margin:0 auto 对div#main不起作用了，原因是什么？
    display:table-cell; 干的好事？

    图片描述

    html5css
    阅读 10.5k
    3 个回答
    得票最新
    头像
    继林
      5831415
      ✓ 已被采纳
      • margin:0 auto只对块级元素生效。display:table-cell 等同于 <td> 元素，不属于块级元素
      • display:table-cell 推荐嵌套在 display:table 中使用
      头像
      海心
        4761514

        你设置了display:table-cell; 的话，margin会失效。你可以使用弹性布局去达到你想要的效果

        .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
        头像
        花衣魔笛
          1
          新手上路，请多包涵

          你没有设置盒子的高度跟宽度

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏