title: CSS Center Float
body: <p>Just a quickie, i am probably being silly here but anyway:</p>
  
  <p>I have a navigation that is centrally positioned with margins, this has a list of links, the problem i am having is that because all of my <code>&lt;li&gt;</code> classes are given the css: <code>float:left</code> they align on the left.</p>
  
  <p>E.G:</p>
  
  <p><img src="https://i.stack.imgur.com/aM0ai.png" alt="nav example"></p>
  
  <p>What i would like to know is if there is any way to center these?</p>
  
  <p>Thanks</p>
  
  <p>CSS:</p>
  
  <pre><code>section#nav {
      height: 45px;
      margin-bottom:5px;
      text-align:center;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
  }
  nav {
      max-width: 700px;
      height: 45px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      margin: 0 auto;
  }
  
  nav ul {
      padding:12px 15px;
      margin:0 auto;
      text-align:center;
      overflow:hidden;
  }
  
  nav ul li {
      font-size:14px; 
      float:left;
  }
  
  nav ul li a {
      color: #FFFFFF;
      margin:0 10px;  
      transition: all 0.5s ease-out !important; 
      -moz-transition: all 0.5s ease-out !important;
      -ms-transition: all 0.5s ease-out !important; 
      -webkit-transition: all 0.5s ease-out !important; 
      -o-transition: all 0.5s ease-out !important;
  }
  
  nav ul li a.nav-path-selected {
      border-bottom:1px #ffffff solid;
  }
  
  nav ul li a.nav-path-selected {
      border-bottom:1px #ffffff solid;
      color:#FFFFFF !important;
  }
  
  nav ul li a:hover {
      color:#CCCCCC !important;
      transition: all 0.5s ease-out !important; 
      -moz-transition: all 0.5s ease-out !important;
      -ms-transition: all 0.5s ease-out !important; 
      -webkit-transition: all 0.5s ease-out !important; 
      -o-transition: all 0.5s ease-out !important;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id="nav"&gt;
    &lt;nav&gt;
      &lt;ul class="nav"&gt;
        &lt;li class="nav-selected nav-path-selected"&gt;
          &lt;a class="nav-selected nav-path-selected" href="/"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/about/"&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/opportunities/"&gt;Opportunities&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/inspiration/"&gt;Inspiration&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/members/"&gt;Members&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/section&gt;
  </code></pre>