Margin 0 auto 无法按预期工作答案

【问题标题】：Margin 0 auto wont work as intendedMargin 0 auto 无法按预期工作
【发布时间】：2014-11-02 18:50:03
【问题描述】：

由于某种原因，标题说明了一切，我的 margin 0 auto 没有居中我的 margin: 0 auto;不会将我的 ul 居中在 nav 元素内。任何帮助将不胜感激。我已经查看了堆栈上有关相同问题的其他帖子，但无法解决我的问题。

CSS

/* Sets the body to take up 100% of the width of the browser */
body {
    width: 100%;
    background: #444444;
    margin: 0px;
}

#container{
    width: 100%;
}
header {

    margin-left: -10px;
    margin-top: -10px;
    padding: 0 20px;
    width: 25%;
    height: 12000px;
    background: url("imgs/headerBg.jpg") repeat-y;
    float: left;
}

nav{
    width:60%;
    margin: auto;
}

nav ul{
width: 70%;
list-style-type: none;
text-align: center;
margin: 0 auto;
}

nav ul li{
    height: 45px;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    border-top: 3px double #fff;

}

nav ul li a{
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 2.5em;
}

#homepage{
height: 120000px;
width: 65%;
float: left;
}

#homepage li{
    list-style-type: none;
    height: 14.20%;

}

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Skull Alcohol &copy;</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">


    <header>
        <nav>
            <ul>
                <li><a href="">home</a></li>
                <li><a href="">recipes</a></li>
                <li><a href="">our products</a></li>
                <li><a href="">shop</a></li>
                <li><a href="">contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="homepage">
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
    </section>

    <footer>
        <div id="privacy"><a href=""></a>privacy</div>
        <div id="tos"><a href="">terms of service</a></div>
    </footer>

</div>
</body>
</html>

【问题讨论】：

标签： css margin centering

【解决方案1】：

看起来你的 ul 实际上是居中的，但是因为 ul 在左侧有一个默认填充，所以它看起来更靠右。

尝试将padding: 0 添加到您的nav ul 规则中。

【讨论】：

是否有任何地方可以找到关于每个 html 元素的默认值的文档，所以我不会再犯这个错误？