Как центрировать меню

Question

В настоящее время я работаю с интернет-магазином, и у меня есть проблемы с центрированием верхнего меню.

код выглядит следующим образом:

<div id="webshop-topmenu" class="row logoRow ProductMenu_TD"> 
    <div align="center"> 
     <div class="small-12 columns menus"> 
      <nav class="top-bar productmenu" data-topbar role="navigation"> 
       <ul class="title-area"> 
        <li class="name"></li> 
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
       </ul> 

       <section class="top-bar-section">[[ProductMenu]]</section> 
       </nav> 

       <div class="sub-nav pagelinks TopMenu_TD hide-for-small">[[TopMenu]]</div> 
     </div> 
    </div> 
</div> 

Независимо от того, какой код я использую, меню всегда выравнивается вправо, и я хочу его в центр.

Я пробовал <div align"center"> и <center> и еще пару других кодов, но ничего не работает.

Надеюсь, вы можете мне помочь.

What it looks like

Answer 1

<center> and "align" 

устарели.

После получения ссылки на страницы: Если вы хотите, чтобы центрировать уль # ProductMenu_List, изменить CSS:

.top-bar-section #ProductMenu_List { 
    margin: 0 auto; 
    //float: right; 
    //margin-right: -10px; 
} 

.top-bar-section ul li { 
    //float: left; 
    display: inline-block; 
} 

Если вы хотите центрирования div.TopMenu_TD, сделайте следующее в CSS:

.logoRow .menus .pagelinks { 
    //float: right; 
} 

Если вы хотите, чтобы элементы центра, «float» в большинстве случаев являются противоположными полезными. Text-align: center, display: inline-block и/или margin: 0 auto - это в большинстве случаев решение.

И возьмите свой Google для Html5 и CSS3. Это понадобится вам.

Update После того, видя, что у вас есть доступ только к шаблонам - добавьте следующий код в «Kodefelter» - Руководитель:

<style> 
    .top-bar-section #ProductMenu_List { 
     margin: 0 auto; 
     float: none; 
     max-width: 400px;//or another value 
     display: block; 
    } 

    #ProductMenu_List > li { 
     float: none; 
     display: inline-block; 
    } 

    .logoRow .menus .pagelinks { 
     float: none; 
     display: block!important; 
     margin: 0 auto; 
     max-width: 500px; 
    } 
</style>