如何让菜单居中

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"

已弃用。

获得 link 到页面后：如果你想居中 ul#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 and/or margin: 0 auto 在大多数情况下都是解决方案。

然后前往 google 前往 Html5 和 CSS3。你会需要它的。

更新在看到您只能访问模板后 - 将以下代码添加到 "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>

如何让菜单居中

How to center the menu

html

center