为什么不能使用margin:0 auto?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

我有一个100%宽度的#header div,div里我有一个无序列表。我已将margin:0 auto应用于无序列表,但不会将其居中在标题div中

这是我的代码:

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>
提问于
用户回答回答于

需要定义正在居中的元素的宽度,而不是父元素。

#header ul {
    margin: 0 auto;
    width: 90%;
}

用户回答回答于

你需要的是一个区块,一个区块在左侧和右侧,因此可以受到边距的影响。

#content {
display: block;
margin: 0 auto;
}

扫码关注云+社区