CSS 将 Bootstrap 4 导航栏中的元素居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33867603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center an element in Bootstrap 4 Navbar
提问by LuTz
No matter what I try, I can't center something in Bootstrap navbar, any solutions for it?
无论我尝试什么，我都无法将某些东西放在 Bootstrap 导航栏中，有什么解决方案吗？
I've tried adding a div, using margin:0 auto;or margin-right:auto; margin-left:auto;, used center-blockclass. Nothing works, why is so hard to achieve something so simple I can't understand, what I'm doing wrong?
我试过添加一个 div，使用margin:0 auto;or margin-right:auto; margin-left:auto;，使用center-block类。什么都行不通，为什么这么简单的事情很难实现，我无法理解，我做错了什么？
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>
采纳答案by Victor
In Bootstrap 4, there is a new utility known as .mx-auto. You just need to specify the width of the centered element.
在 Bootstrap 4 中，有一个名为.mx-auto. 您只需要指定居中元素的宽度。
Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
参考：http: //v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
Diffferent from Bass Jobsen's answer, which is a relative center to the elements on both ends, the following example is absolute centered.
与 Bass Jobsen 的答案不同，后者是两端元素的相对中心，以下示例是绝对中心。
Here's the HTML:
这是 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>
And CSS:
和 CSS：
.navbar-logo {
width: 90px;
}
回答by Zim
Updated for Bootstrap 4.1+
针对 Bootstrap 4.1+ 更新
Bootstrap 4 the navbar now uses flexbox so the Website Namecan be centered using mx-auto. The left and right side menus don't require floats.
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-autoDemo
If the Navbar only has a single navbar-nav, then justify-content-centercan also be used to center.
如果导航栏只有一个navbar-nav，那么justify-content-center也可以用来居中。
EDIT
编辑
In the solution above, the Website Nameis centered relativeto the left and right navbar-navso if the width of these adjacent navs are different the Website Nameis no longer centered.
在上面的解决方案中，相对于左侧和右侧Website Name居中，因此如果这些相邻导航的宽度不同，则不再居中。navbar-navWebsite Name
To resolve this, one of the flexbox workarounds for absolute centeringcan be used...
为了解决这个问题，可以使用一种绝对居中的 flexbox 解决方法......
Option 1 - Use position:absolute;
选项 1 - 使用位置：绝对；
Since it's ok to use absolute positioning in flexbox, one option is to use this on the item to be centered.
由于可以在 flexbox 中使用绝对定位，因此一种选择是在要居中的项目上使用它。
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Navbar center with absolute positionDemo
Option 2 - Use flexbox nesting
选项 2 - 使用 flexbox 嵌套
Finally, another option is to make the centered item also display:flexbox(using d-flex) and center justified. In this case each navbar component must have flex-grow:1
最后，另一种选择是使居中的项目也display:flexbox（使用d-flex）并居中对齐。在这种情况下，每个导航栏组件必须具有flex-grow:1
As of Bootstrap 4 Beta, the Navbar is now display:flex. Bootstrap 4.1.0 includes a new flex-fillclass to make each nav section fill the width:
从 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 nestingDemo
Prior to Bootstrap 4.1.0 you can add the flex-fill class like this...
在 Bootstrap 4.1.0 之前，您可以像这样添加 flex-fill 类...
.flex-fill {
flex:1
}
As of 4.1 flex-fillis included in Bootstrap.
自 4.1 起flex-fill包含在 Bootstrap 中。
Bootstrap 4 Navbar center demos
More centering demos
Center links on desktop, left align on mobile
Bootstrap 4 Navbar 中心演示
更多居中演示
桌面上的中心链接，移动设备上的左对齐
Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
How move 'nav' element under 'navbar-brand' in my Navbar
相关：
如何在 Bootstrap 中居中导航项目？
带有左对齐、居中或右对齐项目的 Bootstrap NavBar
如何在我的导航栏中的“navbar-brand”下移动“nav”元素
回答by Priya Rajaram
Try this.
尝试这个。
.nav-tabs > li{
float:none !important;
display:inline-block !important;
}
.nav-tabs {
text-align:center !important;
}
回答by cDub
I had a similar problem; the anchor text in my Bootstrap4 navbar wasn't centered. Simply added text-centerin the anchor's class.
我有一个类似的问题；我的 Bootstrap4 导航栏中的锚文本没有居中。简单地添加text-center到锚的类中。
回答by Bass Jobsen
See: https://stackoverflow.com/a/14146967/1596547, now you can use:
请参阅：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>
apply text-xs-centeron your container and set display: inline-block;for your list.
适用text-xs-center于您的容器并设置display: inline-block;为您的列表。
回答by Hezy Ziv
use mx-auto will do the job
使用 mx-auto 将完成这项工作
<ul class="navbar-nav mx-auto">
回答by Ajay Makwana
make new style
打造新风格
.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%;
}
Replace website name UL with below
将网站名称 UL 替换为以下
<ul class="nav navbar-nav center-nav">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
Hope this helps..
希望这可以帮助..
回答by austin
from the docs
从文档
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 的帮助下，导航栏可能包含一些文本。此类调整文本字符串的垂直对齐方式和水平间距。
i applied the .navbar-text class to my <li>element, so the result is
我将 .navbar-text 类应用于我的<li>元素，所以结果是
<li class="nav-item navbar-text">
this centers the links vertically with respect to my navbar-brand img
这将相对于我的导航栏品牌 img 垂直居中链接
回答by sam kh
Why Not using bootstrap utilities. here is the code
为什么不使用引导实用程序。这是代码
<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>
