html - 在标题中居中 ul 导航

Question

我已经尝试搜索这个答案，因为我知道这个问题已经被问过很多次了，我之前发现的每一个建议都不适合我。我怎样才能让这个 ul nav 居中而不是 float ？谢谢!

jsfiddle link here

    <header>
  <div id="header-content">
    <nav class="header">
      <input class="menu-btn" type="checkbox" id="menu-btn" />
      <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
      <ul class="menu">
        <li><a href="#work">Our Work</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#careers">Careers</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

nav.header {
    width: 100%; 
    height: auto;
    float: right;
    background-color: Silver;
    text-align: left;
    margin: 0 0 10px 0;
}
.header ul {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.header ul li {
    display: block;
    float: left;
}
.header li a {
    display: block;
    float: left; 
    padding: 1em;
    /*  border-right: 1px solid #f4f4f4;*/
    text-decoration: none;
    color: #000000;
}
.header li a:hover {
    background-color: #B5B5B5;
}

Answer 1

一个解决方案是给菜单 ul 一个宽度(*我在这里使用了 min-width)，将它设置为一个 block ，并将边距设置为 0 auto:

.header ul {
  display: block;
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  min-width: 450px;
}

并设置 .header .menu 没有 float :

.header .menu {
  clear: none;
  float: none;
  max-height: none;
}

但这不是一个完美的解决方案，因为您需要为较小尺寸的屏幕编写断点。