鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全  HTML/ 為何margin:0 auto不起作用了？

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

<!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 對(duì)div#main不起作用了，原因是什么？
display:table-cell; 干的好事？

圖片描述

回答
編輯回答
憶往昔

你設(shè)置了display:table-cell; 的話，margin會(huì)失效。你可以使用彈性布局去達(dá)到你想要的效果

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
2017年7月2日 15:54
編輯回答
扯機(jī)薄
  • margin:0 auto只對(duì)塊級(jí)元素生效。display:table-cell 等同于 <td> 元素，不屬于塊級(jí)元素
  • display:table-cell 推薦嵌套在 display:table 中使用
2018年1月10日 13:05