javascript - 如何使用响应式设计将此菜单置于移动布局的中心

Question

现在手机布局的菜单在左边，我想把它放在中间？在我的设计中，ii 必须是水平的。谁能告诉我该怎么做？

$('#nav-toggle').click(function() {
  $('nav').toggleClass("active");
  $("#nav-toggle").toggleClass("menu-selected");
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  font-size: 100%;
}
#top-bar {
  position: relative;
  max-width: 1000px;
  height: 85px;
  background-color: #22bbff;
  margin-left: auto;
  margin-right: auto;
}
nav {
  position: relative;
}
#nav-toggle {
  display: none;
}
ul {
  list-style-type: none;
}
li {
  float: left;
}
a {
  text-align: center;
  text-decoration: none;
  display: block;
  color: #fff;
  background-color: #294C52;
  border: 1px solid #fff;
  width: 150px;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}
a:hover {
  background-color: #1BBC9B;
}
/*Desktop*/

@media screen and (min-width: 767px) {
  #nav-toggle {
    float: right;
    display: block;
    width: 85px;
    height: 85px;
    background-image: url(../menu.jpg);
  }
  #nav-toggle.menu-selected {
    background-image: url(../menu_hover.jpg);
  }
  nav {
    float: right;
  }
  .active ul {
    display: block;
  }
  ul {
    display: none;
    top: 85px;
    width: 150px;
    position: relative;
    right: -85px;
  }
  li {}
}

<div id="top-bar">
  <a href="#" id="nav-toggle"></a>
  <nav>
    <ul>
      <li><a href="services.html" title="專業服務">專業服務</a>
      </li>
      <li><a href="join.html" title="如何參與">如何參與</a>
      </li>
      <li><a href="contact.html" title="想了解更多">聯絡我們</a>
      </li>
    </ul>
  </nav>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Answer 1

使用 text-align: center 和 display: inline-block 而不是 float: left

codepen

ul {
  list-style-type: none;
  text-align: center; 
}  
li {
  display: inline-block;
}

编辑:还有垂直居中的奖励

nav {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}