CSS 在 Bootstrap 导航栏中居中品牌徽标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23400234/
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
Centering brand logo in Bootstrap Navbar
提问by AstroSharp
I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle. This is the code:
我正在尝试实施 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间。这是代码：
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-inner">
<div class="container">
<button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="/Content/themes/next/images/logo.png" /></a>
<div class="nav-collapse">
<ul class="nav">
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
</ul>
</div>
<ul class="nav pull-right">
<li>
<a href="#">
<div class="nextCog"></div>
</a>
</li>
</ul>
<span class="navbar-text pull-right">superpup1 </span>
</div>
</div>
</div>It makes a nice looking navbar:
它使一个漂亮的导航栏：
However, I would like the logo (green) remain in the middle persistently. I am adding this style to the tag with "brand" class:
但是，我希望徽标（绿色）始终保持在中间。我将此样式添加到带有“brand”类的标签中：
<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
<img src="/Content/themes/next/images/logo.png" />
</a>
It partially solves the problem: the logo is in the middle but it pushes the rest of the navbar elements down:
它部分解决了这个问题：徽标位于中间，但它将导航栏的其余元素向下推：
This is an undesirable effect that I would like to eliminate. Could you suggest a solution? Maybe it's a wrong approach to centering a logo from the start ?
这是我想消除的不良影响。你能提出一个解决方案吗？也许从一开始就将徽标居中是一种错误的方法？
回答by Tepken Vannkorn
Try this:
尝试这个：
.navbar {
position: relative;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.
将徽标居中放置 50% 减去徽标宽度的一半，以便在放大和缩小时不会出现问题。
See fiddle
见小提琴
回答by Bryan Willis
The simplest way is css transform:
最简单的方法是css transform：
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
DEMO: http://codepen.io/candid/pen/dGPZvR
演示：http: //codepen.io/candid/pen/dGPZvR
This way also works with dynamically sized background imagesfor the logo and allows us to utilize the text-hide class:
这种方式也适用于徽标的动态大小的背景图像，并允许我们利用 text-hide 类：
CSS:
CSS：
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
transform: translateX(-50%);
left: 50%;
position: absolute;
width: 200px; /* no height needed ... image will resize automagically */
}
HTML:
HTML：
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
</a>
We can also use flexbox though. However, using this method we'd have to move navbar-brandoutside of navbar-header. This way is great though because we can now have image and text side by side:
不过我们也可以使用 flexbox。但是，使用这种方法，我们不得不移到navbar-brand外面navbar-header。这种方式很棒，因为我们现在可以并排显示图像和文本：
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.navbar-brand {
display: flex;
align-items: center;
}
Demo: http://codepen.io/candid/pen/yeLZax
演示：http: //codepen.io/candid/pen/yeLZax
To only achieve these results on mobile simply wrap the above css inside a media query:
要仅在移动设备上实现这些结果，只需将上述 css 包装在媒体查询中：
@media (max-width: 768px) {
}
回答by Zim
Updated 2018
2018 年更新
Bootstrap 3
引导程序 3
See if this example helps: http://bootply.com/mQh8DyRfWY
看看这个例子是否有帮助：http: //bootply.com/mQh8DyRfWY
The brand is centered using..
该品牌以使用..
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
Your markup is for Bootstrap 2, not 3. There is no longer a navbar-inner.
您的标记适用于 Bootstrap 2，而不是 3。不再有navbar-inner.
EDIT - Another approach is using transform: translateX(-50%);
编辑 - 另一种方法是使用 transform: translateX(-50%);
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
http://www.bootply.com/V7vKDfk46G
http://www.bootply.com/V7vKDfk46G
Bootstrap 4
引导程序 4
In Bootstrap 4, mx-autoor flexbox can be used to center the brand and other elements. See How to position navbar contents in Bootstrap 4for an explanation.
在 Bootstrap 4 中，mx-auto或 flexbox 可用于使品牌和其他元素居中。有关说明，请参阅如何在 Bootstrap 4 中定位导航栏内容。
Also see:
另见：
回答by Andrew Martin
Old question, but just for posterity.
老问题，但只是为了后代。
I've found the easiest way to do it is to have the image as the background image of the navbar-brand. Just makes sure to put in a custom width.
我发现最简单的方法是将图像作为导航栏品牌的背景图像。只需确保放入自定义宽度即可。
.navbar-brand
{
margin-left: auto;
margin-right: auto;
width: 150px;
background-image: url('logo.png');
}
回答by quAnton
A solution where the logo is truly centered and the links are justified.
徽标真正居中且链接合理的解决方案。
The max recommended number of links for the nav is 6, depending on the length of the words in eache link.
导航的最大推荐链接数为 6，具体取决于每个链接中单词的长度。
If you have 5 links, insert an empty link and style it with:
如果您有 5 个链接，请插入一个空链接并设置样式：
class="hidden-xs" style="visibility: hidden;"
in this way the number of links is always even.
这样，链接的数量总是偶数。
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-nav > li {
float: none;
vertical-align: bottom;
}
#site-logo {
position: relative;
vertical-align: bottom;
bottom: -35px;
}
#site-logo a {
margin-top: -53px;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-justified navbar-nav center-block">
<li class="active"><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
<li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>To see result click on run snippetand then full page
要查看结果，请单击运行代码段，然后单击整页
