引导中心导航栏项目

Question

我知道可以把导航栏项目推向左边和右边，但如何将它们居中对齐？

我知道可以把导航栏项目推向左边和右边，但如何将它们居中对齐？

text-align:center;

不起作用，也没能实现我想到的其他事情。

- PaulBGD

---

我们需要查看更多的代码。您能与我们分享相关的HTML和CSS吗？ - RobertAKARobin

Answer 1

你需要修改Navbar组件的一些CSS规则。因此，请在nav.navbar中添加一个类center和以下规则：

```css .center { display: flex; justify-content: center; align-items: center; } ```

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

工作演示 (Bootstrap 3.3.7)

- letiagoalves

---

这个方法可行，但是会在导航栏元素下方添加一个7像素的边距。在 .navbar.center .navbar-inner 块中添加 height: 50px; 是不太正规的，但是可以解决问题。 - Scott Odle

当屏幕调整为较小的宽度时，这也会改变li元素的宽度，例如在断点触发时。有没有快速的技巧可以使宽度为100%？ - user3574492

Bootstrap 4.5.0将navbar-inner类更改为navbar-collapse，但即使替换后，这种解决方案也无法正常工作。下面@Ania的答案有效。 - TracyYXChen

Answer 2

在扩展所选答案的基础上，添加垂直对齐顶部将防止导航项下方出现空白间隙。

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
    vertical-align: top;
}

Demo

- Joe Fusco

Answer 3

我曾经遇到过类似的问题。对我有效的解决方法是添加 'justify-content' 规则，如下所示:

CSS：

.navbar-expand-lg .navbar-collapse {
display: flex!important;
justify-content: space-around;
flex-basis: auto;
}

HTML：

<nav id="hamburger" class="navbar sticky-top navbar-expand-lg navbar-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav center">
        <div><a class="nav-item nav-link active" href="#">
          Start <span class="sr-only">(current)</span></a>
        </div>
        <div><a class="nav-item nav-link" href="#">Portfolio</a></div>
        <div><a class="nav-item nav-link" href="#">Blog</a></div>
        <div><a class="nav-item nav-link" href="#">O mnie</a></div>
        <div><a class="nav-item nav-link" href="#">Kontakt</a></div>
    </div>
  </div>
</nav>

- Ania

Answer 4

使用 text-center 或 mx-auto 或 container-fluid 或使用 flexbox 技术，flex justify-center

1. 您可以使用这个 hack text-center（这不仅适用于文本）

2. 或使用精确的 Bootstrap 类 mx-auto

例如：class="text-center" 或 class="mx-auto"

在上下文中：

<div class="btn-group text-center"> or <div class="btn-group mx-auto">

尽量不要使用内联样式（不良实践）

<div class="btn-group" style="margin:0 auto">

---

参考资料:

text-center => https://getbootstrap.com/docs/4.0/utilities/text/

mx-auto => https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering

- Jonathan Sanchez

---

flex justify-center 你能给一个例子吗？ - eran otzap

Answer 5

您可以使用

text-align:center;

将一个包装元素设置为居中其子元素，但只有当子元素具有此属性时。

display: inline;
/* or */
display: inline-block;

如果你知道想要居中的元素的宽度，另一个选项是：

display: block;
width: /* something */;
margin: 0 auto;

- Oriol