css - Center an element in Bootstrap Navbar

Question

No matter what I try, I can't center something in Bootstrap navbar, any solutions for it?

I've tried adding a div, using margin:0 auto; or margin-right:auto; margin-left:auto;, used center-block class. Nothing works, why is so hard to achieve something so simple I can't understand, what I'm doing wrong?

Here's the current code :

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

score 81 · Accepted Answer

更新引导程序 5 (2021)

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

更新引导程序 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演示的导航栏中心

如果 Navbar 只有一个navbar-nav, thenjustify-content-center也可以用来居中。

编辑

在上面的解决方案中，相对于左右Website Name居中，因此如果这些相邻导航的宽度不同，则不再居中。navbar-navWebsite Name

为了解决这个问题，可以使用绝对居中的 flexbox 解决方法之一......

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

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

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

具有绝对位置的导航栏中心演示

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

带有flexbox 嵌套演示的导航栏中心

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

.flex-fill {
   flex:1
}

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

Bootstrap 4 Navbar center demos
更多居中演示
在桌面上居中链接，在移动设备上左对齐

相关：
如何在 Bootstrap 中居中导航项？
带有左对齐、居中或右对齐项目的引导导航栏
 如何在我的导航栏中移动“导航栏品牌”下的“导航”元素

score 39 · Accepted Answer

在 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;
}

score 1 · Accepted Answer

我有类似的问题；我的 Bootstrap4 导航栏中的锚文本没有居中。只需添加text-center到锚的类中。

score 1 · Accepted Answer

请参阅：https ://stackoverflow.com/a/14146967/1596547 ，现在您可以使用：

<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;为您的列表。

score 1 · Accepted Answer

1

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

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

于 2019-02-12T15:21:26.577 回答

score 1 · Accepted Answer

尝试这个。

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

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

score 0 · Accepted Answer

打造新风格

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

希望这可以帮助..

score 0 · Accepted Answer

从文档

在 .navbar-text 的帮助下，导航栏可能包含一些文本。此类调整文本字符串的垂直对齐和水平间距。

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

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

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

score -1 · Accepted Answer

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

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

css - Center an element in Bootstrap Navbar

9 回答 9

编辑

Related

Reference