CSS Bootstrap 中心导航栏项目

Bootstrap Center Navbar Items

提问by PaulBGD

I know I can push navbar items to the left and right, but how would I center them?

我知道我可以左右推动导航栏项目，但我如何将它们居中？

text-align:center;

doesn't work nor any of the other things I thought of.

不起作用，也没有我想到的任何其他事情。

回答by letiagoalves

You will need to modify some CSS rules for Navbar component. So add a class centerto nav.navbarand the following rules:

您需要修改 Navbar 组件的一些 CSS 规则。所以加个班center，以nav.navbar如下规则：

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

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

Working demo (Bootstrap 3.3.7)

工作演示（引导程序 3.3.7）

回答by Joe Fusco

To extend upon the selected answer, adding vertical align top will prevent the space from appearing under the nav items.

要扩展所选答案，添加垂直对齐顶部将防止空间出现在导航项目下方。

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

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

Demo

演示

回答by Oriol

You can use

您可以使用

text-align:center;

to a wrapper element to center its childs, but only if the childs have

到包装元素以使其孩子居中，但前提是孩子有

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

Another option, if you know the width of the element you want to center, is

另一种选择，如果您知道要居中的元素的宽度，则是

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

回答by jso1919

Use text-centeror mx-autoor container-fluidor use flexbox technique, flex justify-center

使用text-center或mx-auto或container-fluid或使用弹性盒技术，flex justify-center

1. You could use this hack text-center(this does not only apply for text)

2. Or use the exact boostrap class mx-auto

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

2. 或者使用确切的 boostrap 类 mx-auto

example class="text-center"or class="mx-auto"

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

in context

在上下文中

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

TRY NOT TO USEinline styles (bad practice)

尽量不要使用内联样式（不好的做法）

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

---

---

References here:

参考这里：

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

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

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

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

回答by Ania

I had similar problem. What worked for me is adding rule 'justify-content' like this:

我有类似的问题。对我有用的是添加规则“justify-content”，如下所示：

CSS:

CSS：

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

HTML:

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>