如何使 Zurb Foundation 顶部栏导航居中？

Posted 2023-04-12

【中文标题】如何使 Zurb Foundation 顶部栏导航居中？

【英文标题】：How do I center the Zurb Foundation top bar nav?

【发布时间】：2013-05-27 19:59:11

【问题描述】：

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

| Home | aveoTSD | Silent Nite          |

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

|          Home | aveoTSD | Silent Nite          |

将它与带有“示例”文本的红色条完全一样居中。

这里是my css。

【问题讨论】：

我建议您将所有内容都放入 JSFiddle 并发布到 JSFiddle 的链接，或者直接在此处发布所有相关的 html 和 CSS，而不是链接它。

我更喜欢使用实时站点，所以顶部的链接很好。

@user2343800 考虑我的答案而不是你接受的答案

在导航中添加 .row 怎么样？因为它会自动将事物居中，所以这可能是一种技巧。

..... .........

【参考方案1】：

您可以通过将其添加到您的 CSS 中来做到这一点（最好删除冲突的样式）：

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

【讨论】：

+1 -- 这很完美，通常是全宽居中列表项的标准。不知道为什么它被否决了。

当我这样做时，它弄乱了小型移动版本，特别是对于任何带有下拉菜单的项目。其他人有这个问题或知道解决方案吗？

您可能应该发布一个带有链接的新问题以寻求帮助。

@ralph.m 我继续这样做，但由于重复的问题被版主批评...任何希望在不影响功能的情况下实现此功能的人都可以在此处查看我的答案

【参考方案2】：

发现这很有帮助： https://github.com/zurb/foundation/issues/1598

将导航的容器设置为： 文本对齐：居中；

然后对于导航本身，将显示设置为： display:inline-block;

希望有帮助！

【讨论】：

要查看实现此解决方案背后的代码，请参阅下面的答案

【参考方案3】：

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

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>

【参考方案4】：

使用上面的例子，我做了一些调整。以上是一切的中心。下面的调整使顶栏居中，左对齐下拉文本，并在移动设备中居中“汉堡包”/菜单图标：

/* 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;