在 Bootstrap 导航栏中将元素居中

Posted 2023-03-06

【中文标题】在 Bootstrap 导航栏中将元素居中

【英文标题】：Center an element in Bootstrap Navbar

【发布时间】：2016-02-25 08:33:03

【问题描述】：

无论我尝试什么，我都无法在 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>

【问题讨论】：

从 Bootstrap 4 alpha 6 (flexbox) 开始，here is the solution 用于水平导航栏中心。

你到底想特别强调什么？

【参考方案1】：

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

Navbar center with mx-auto Demo

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

编辑

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

为了解决这个问题，可以使用 absolute centering 的 flexbox 变通方法之一...

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

由于可以在 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 demosMore centering demosCenter links on desktop, left align on mobile

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

【讨论】：

选项 2 对我有用！如果您不介意，我有两个问题： 1. flex-grow 是做什么的？ 2.如何增加中心元素的宽度？我希望将中心元素用作搜索栏。

选项 1 对我有用！正如 ZimSystem 在他的 CodePly 演示中指出的那样，只需记住将 ml-auto 标记添加到右侧的文本中。

您是否使用 Bootstrap 4 beta 测试过您的解决方案？根据以下article，您需要将.navbar-toggleable-sm 替换为.navbar-expand-sm 和.bg-inverse 替换为.bg-dark。

你如何使用导航栏折叠这个？

是否要在侧边导航栏之后对齐菜单项，以便菜单从 x 轴上主要内容开始的位置开始？

【参考方案2】：

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

【讨论】：

不理想，因为它需要设置特定的徽标宽度。此外，在 alpha 6 中不再适用。

***.com/questions/45714674/bootstrap-4-center-list 它仍然有效

【参考方案3】：

试试这个。

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


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

【讨论】：

你能提供你的网址吗？或任何演示链接。我会在那里结帐。

试试这个。 .navbar .navbar-nav 显示：内联块；浮动：无；垂直对齐：顶部；

【参考方案4】：

见：https://***.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;。

【参考方案5】：

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

【讨论】：

@Mohsin 你试过 输入 display: block 吗？或 class="文本中心"

【参考方案6】：

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

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

【参考方案7】：

打造新风格

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

希望这会有所帮助..

【参考方案8】：

来自文档

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

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

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

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

【参考方案9】：

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

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