将 Bootstrap 导航栏中的元素居中

无论我尝试什么，我都无法将 Bootstrap 导航栏中的某些内容居中，有什么解决方案吗？

我尝试添加一个div，使用margin:0 auto; or margin-right:auto; margin-left:auto;, used center-block班级。没有任何作用，为什么这么难实现如此简单的事情，我无法理解，我做错了什么？

这是当前的代码：

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

更新 Bootstrap 5 (2021)

导航栏仍然使用 Flexbox，因此对齐方式与 Bootstrap 4 相同。

更新Bootstrap 4.1+

Bootstrap 4 导航栏现在使用 Flexbox，因此Website Name可以使用居中mx-auto。左侧和右侧菜单不需要浮动。

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

导航栏中心mx-auto Demo http://www.codeply.com/go/J9rL11Tf7h

如果导航栏只有一个navbar-nav, then justify-content-center也可用于居中。

EDIT

在上面的解决方案中，Website Name居中relative向左和向右navbar-nav所以如果这些相邻导航的宽度不同Website Name不再居中。

为了解决这个问题，弹性盒解决方法之一绝对居中可以用...

选项 1 - 使用位置：绝对；

由于可以在 Flexbox 中使用绝对定位，因此一种选择是在要居中的项目上使用它。

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

导航栏中心绝对位置 Demo http://www.codeply.com/go/BC2gFdZ9fb

选项 2 - 使用 Flexbox 嵌套

最后，另一个选择是使居中的项目也display:flexbox (using d-flex) 并居中对齐。在这种情况下，每个导航栏组件必须具有flex-grow:1罢工>

从 Bootstrap 4 Beta 开始，导航栏现在是display:flex。 Bootstrap 4.1.0 包括一个新的flex-fill使每个导航部分填充宽度的类：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

导航栏中心弹性盒嵌套 Demo http://www.codeply.com/go/4XNoJE4T3j

在 Bootstrap 4.1.0 之前，您可以像这样添加 flex-fill 类...

.flex-fill {
   flex:1
}

自 4.1 起flex-fill包含在 Bootstrap 中。

Bootstrap 4 导航栏中心演示 https://www.codeply.com/go/qhaBrcWp3v
更多居中演示 https://www.codeply.com/go/4XNoJE4T3j
在桌面上居中链接，在移动设备上左对齐 https://www.codeply.com/go/wWZKVllCei

Related:
如何在 Bootstrap 中居中导航项？ https://stackoverflow.com/questions/43738067/how-to-center-nav-items-in-bootstrap/43738936#43738936
Bootstrap NavBar 具有左对齐、居中或右对齐的项目 https://stackoverflow.com/questions/19733447/
如何在我的导航栏中将“nav”元素移动到“navbar-brand”下 https://stackoverflow.com/questions/55077119/how-move-nav-element-under-navbar-brand-in-my-navbar