css - 在 Bootstrap Navbar 中居中一个元素

Question

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

我试过添加一个 div，使用 margin:0 auto; 或 margin-right:auto; margin-left:auto;，使用了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>

Answer 1

更新 Bootstrap 5 (2021)

Navbar 仍然使用 flexbox，因此对齐方式与 Bootstrap 4 相同。

更新 Bootstrap 4.1+

Bootstrap 4 导航栏现在使用 flexbox，因此 网站名称 可以使用 mx-auto 居中。左侧和右侧菜单不需要 float 。

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

Navbar center with mx-auto Demo

如果导航栏只有一个navbar-nav，那么justify-content-center也可以用来居中。

编辑

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

要解决此问题，可以使用绝对居中 的 flexbox 解决方法之一...

选项 1 - 使用 position:absolute;

既然可以在 flexbox 中使用绝对定位，一种选择是在要居中的元素上使用它。

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

Navbar center with absolute position Demo

选项 2 - 使用 flexbox 嵌套

最后，另一种选择是使居中元素也 display:flexbox(使用 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>

Navbar center with flexbox nesting Demo

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

.flex-fill {
   flex:1
}

从 4.1 开始，flex-fill 包含在 Bootstrap 中。

---

Bootstrap 4 Navbar center demos
More centering demos
Center links on desktop, left align on mobile

相关:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
How move 'nav' element under 'navbar-brand' in my Navbar