Question

my site上的顶栏导航栏左对齐：

| Home | aveoTSD | Silent Nite          |

我想像这样将顶部栏导航居中：

|          Home | aveoTSD | Silent Nite          |

使用“示例”文本将其居中显示为红色栏。

这是my css。

Answer 1

你可以通过将它添加到CSS（最好是删除冲突的样式）来实现：

.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}

Answer 2

发现这有用： https://github.com/zurb/foundation/issues/1598

将导航容器设置为：的文本对齐：中心;

然后，对于导航本身，将显示设置为：的显示：内联块;

希望有所帮助！

Answer 3

这是我发现适用于所有调整大小事件的最佳解决方案。它以Foundation 5 Top-bar元素为中心。

SCSS：

nav.top-bar:not(.expanded) {
            text-align: center;
            section.top-bar-section { display: inline-block; }
                           }

HTML：

<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#"></a></h1>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
        <ul>
            <li><%= link_to 'LINK 1', root_path %></li>
            <li class="divider"></li>
            <li><%= link_to 'LINK2', link_path %></li>
            <li class="divider"></li>
            <li class="has-dropdown">
                <%= link_to 'Droping', "#" %>
                <ul class="dropdown">
                    <li><label>Label:</label></li>
                    <li><%= link_to 'DROP 1', drop_path %></li>
                    <li class="divider"></li>
                    <li><%= link_to 'DROP 2', drop_path %></li>
                </ul>
            </li>
            <li class="divider"></li>
        </ul>
    </section>
</nav>

Answer 4

使用上面的例子，我做了一些调整。以上是一切。下面的调整以topbar为中心，左边是文字的下拉菜单，中心是＆＃34; hamburger＆＃34;移动时的/ menu-icon：

/* center topbar */
/* set alignment to center for small screens */
nav.top-bar { text-align:center; }
nav.top-bar:not(.expanded) {
        text-align: center;
        section.top-bar-section { 
            /* align drop down menu text to left on large screens */
            text-align:left; 
            display: inline-block;

         }


}
/* center the mobile hamburger menu */
.top-bar .toggle-topbar.menu-icon {
 padding: 0;
 right: 50%;
 margin-right: -36px;
}

如何将Zurb Foundation顶部栏杆导航中心？

4 个答案: