How to center the menu

I am currently working with a webshop, and I have some trouble centering the top menu.

The code look like this:

 <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>

No matter what code I use, the menu always aligns to the right, and I want to center it.

I have tried the <div align"center"> and <center> and a couple of other codes, but nothing seems to work.

Hope you can help me here.

What it looks like

Solution

<center> and "align"

are deprecated.

After getting a link to the page: If you want to center the ul#ProductMenu_List, change your CSS:

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

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

If you want to center your div.TopMenu_TD, do following in CSS:

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

If you want to center elements, "float" is in most case the opposite of helpful. Text-align: center, display: inline-block and/or margin: 0 auto are in most case the solution.

And take your to google for Html5 and CSS3. You will need it.

Update After seeing that you only have access to the templates - add following code to "Kodefelter" - Head:

<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>