在标题中居中ul导航

Question

我已经尝试过搜索这个答案，因为我知道这个问题已经被问过很多次了，我之前找到的每个建议都不适合我。我如何才能让这个ul nav居中而不是向右浮动？非常感谢。

jsfiddle链接此处

    <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一个宽度（*我在这里使用了最小宽度），将其设置为块，并将边距设置为0 auto:

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

并将.header .menu设置为无浮动：

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

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