在 Bootstrap 导航栏中居中元素

Question

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

我尝试添加 div，使用 margin:0 auto; 或 margin-right:auto; margin-left:auto;，使用 center-block class。什么都行不通，为什么这么简单的事情很难实现我无法理解，我做错了什么？

这是当前代码：

<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

试试这个。

.nav-tabs > li{
    float:none !important;
    display:inline-block !important;
}

.nav-tabs {
    text-align:center !important;
}

Answer 2

打造新风格

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

将网站名称 UL 替换为以下内容

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

希望这对您有所帮助..

Answer 3

参见：，现在您可以使用：

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-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" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-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>
</nav>

在您的容器上应用 text-xs-center 并为您的列表设置 display: inline-block;。

Answer 4

在Bootstrap 4 中，有一个名为.mx-auto 的新实用程序。您只需要指定居中元素的宽度即可。

参考：http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

与 Bass Jobsen 的答案不同，它是两端元素的相对中心，以下示例是绝对居中的。

这是HTML：

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

和CSS：

.navbar-logo {
  width: 90px;
}

Answer 5

来自文档

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.

我将 .navbar-text class 应用于我的 <li> 元素，所以结果是

<li class="nav-item navbar-text">

这使链接相对于我的导航栏品牌 img 垂直居中

Answer 6

更新 Bootstrap 5 (2021)

导航栏仍然使用 flexbox，因此对齐方式与 Bootstrap 4.

相同

更新Bootstrap4.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>

Navbar center with mx-auto Demo

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

编辑

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

要解决此问题，可以使用 绝对居中 的 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 class 来使每个导航部分填充宽度：

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

.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

相关：

Bootstrap NavBar with left, center or right aligned items

Answer 7

我遇到了类似的问题；我的 Bootstrap4 导航栏中的锚文本没有居中。只需在锚点的 class.

中添加 text-center

Answer 8

使用 mx-auto 将完成这项工作

<ul class="navbar-nav mx-auto">

Answer 9

为什么不使用 bootstrap 实用程序。这是代码

    <nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img src="your-logo"/></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse mx-auto justify-content-md-center" id="collapsibleNavbar" >
    <ul class="navbar-nav col-md-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li> 
    </ul>
  </div> 
</nav>

在 Bootstrap 导航栏中居中元素

Center an element in Bootstrap Navbar

css

navbar

twitter-bootstrap

bootstrap-4

编辑