Menu icon Foundation
Top Bar center menu 6.4 float grid

What is the 'correct' / recommend way to center a top bar menu now? I can see quite hackey ways to do it but wondering what the 'correct' way is? Using float grid with 6.4. Example code below, how should the one ... four list items be centered in the top bar?

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li><a href="#">One</a></li>
      <li>
        <a href="#">Two</a>
         <ul class="menu vertical">
          <li><a href="#">Sub Item</a></li>
          <li><a href="#">Sub Item</a></li>
          <li><a href="#">Sub Item</a></li>
        </ul>
      </li>
      <li><a href="#">three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#"><img src="" alt=""></a></li>
    </ul>
  </div>
</div>

 

top barmenucentercentered

What is the 'correct' / recommend way to center a top bar menu now? I can see quite hackey ways to do it but wondering what the 'correct' way is? Using float grid with 6.4. Example code below, how should the one ... four list items be centered in the top bar?

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li><a href="#">One</a></li>
      <li>
        <a href="#">Two</a>
         <ul class="menu vertical">
          <li><a href="#">Sub Item</a></li>
          <li><a href="#">Sub Item</a></li>
          <li><a href="#">Sub Item</a></li>
        </ul>
      </li>
      <li><a href="#">three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#"><img src="" alt=""></a></li>
    </ul>
  </div>
</div>