Responsive design 中心响应导航

就我个人而言，我无法将列表项放在页面中央。有人能帮忙吗？我只想让六个li元素居中，直到它转到mobile。JS fiddle：以下是html：

<div class="header">
  <a href="index.html" class="logo"><img src="logo_ph.png" /></a>
  <div class="nav-collapse" id="nav">
    <ul>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Management</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">OUR ENVIRONMENT STORY</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Environment</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Social</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Economic</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Governance</a>
        <ul>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
          <li><a href="subpage.html">Sub link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="section.html" class="dropdown-toggle">Company Profile</a>
      </li>
    </ul>
  </div>
</div>

.nav-collapse li{text-align:center；}解决了这个问题，我来回答我自己的问题：.nav-collapse ul{float:none；display:inline block；margin:0 auto；width:auto；}和.nav-collapse{margin:0px auto；width:650px；float:none；text-align:center；}