html - 如何在不手动设置宽度的情况下水平居中导航栏？

Question

我有以下导航栏:

<header>
  <h1>Blah blah</h1>
  <nav>
    <ul>
      <li><a href="#">foo</a>
      <li><a href="#">bar</a>
      <li><a href="#">baz</a>
      <li><a href="#">zop</a>
    </ul>
  </nav>
</header>

如何完美居中？我还有以下 CSS:

header {
    background-color: #a4c9f3;
    text-align: center;
}
header nav {
    /* guessing this width works, but I don't want to do it manually */
    /* width: 24em; */
    display: inline-block;
}
header nav ul li {
    float: left;
    padding: 0 0 0 6px;
    list-style: none;
}
header nav ul li a {
    padding: 9px 22px 4px 16px;
    background-color: #83b2e6;
}

正如您在此 jsfiddle 中看到的那样，它几乎居中。

Answer 1

将 ul 更改为 width: 100% 并将文本居中，将 li 设置为 display: inline。并将您的 anchor 显示为内联 block :

CSS:

header {
    background-color: #a4c9f3;
    text-align: center;
}
header nav ul {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
header nav ul li {
    display: inline;
}
header nav ul li a {
    padding: 9px 22px 4px 16px;
    display: inline-block;
    background-color: #83b2e6;
}

updated Fiddle