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"

已被弃用。

获取页面链接后：如果您想将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;
}

如果你想要中心元素，＆＃34;浮动＆＃34;在大多数情况下是有用的反面。文本对齐：居中，显示：内联块和/或边距：0自动在大多数情况下是解决方案。

带你去谷歌Html5和CSS3。你需要它。

<强>更新在看到您只能访问模板后 - 将以下代码添加到＆＃34; Kodefelter＆＃34; - 负责人：

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

如何使菜单居中

1 个答案: