如何使用響應式設計將此菜單置於移動終端中心

Question

現在移動布局的菜單在左邊，我想把它放在中心位置？ 我必須在我的設計中保持水平。 有人能告訴我該怎么做嗎？

 $('#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

嘗試這個

nav {
  position: relative;
  display:table;
  margin:auto;
  text-align: center;
}
li {
  display:inline-block;
}

https://jsfiddle.net/zbnwwh96/1/

Answer 2

使用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%;
}