Clever Geek Handbook

How to center this menu in a responsive mobile lattoate

Now the menu in the mobile layout is on the left and I want to center it? Ii should be horizontal in my design. Can anyone tell me how to do this?

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


+3


source to share


2 answers


Use text-align: center

and display: inline-block

instead offloat: left

codepen

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


EDIT: bonus for vertical center also

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


source


try it

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


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

+1


source






More articles:


All Articles