CSS 导航栏中央的 Twitter Bootstrap 3.0 徽标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19284778/
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
Twitter Bootstrap 3.0 Logo in the center of navbar
提问by torayeff
I want to center my logo in the navbar, can I use or should I use grid layouts inside navbar or I should do something else:
我想在导航栏中将我的徽标居中，我可以使用还是应该在导航栏中使用网格布局，或者我应该做其他事情：
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="navbar-header">
<!-- I want this at the center of navbar -->
<a class="navbar-brand" href="#"><img src="logo.png"/></a>
</div>
</div>
回答by Bryan Willis
Unfortunately the accepted answer is using html for Bootstrap 2. However, I've come up with several ways to do this using Bootstrap 3. The simplest way to do this is probably using css translate.
不幸的是，接受的答案是将 html 用于Bootstrap 2。但是，我想出了几种使用Bootstrap 3来做到这一点的方法。最简单的方法可能是使用 css translate。
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
Live Demo: http://codepen.io/candid/pen/dGPZvR
现场演示：http: //codepen.io/candid/pen/dGPZvR
This method also allows us to use background images for the logo and allows us to include text without having it show up in the display.
这种方法还允许我们为徽标使用背景图像，并允许我们在不显示在显示器中的情况下包含文本。
HTML:
HTML：
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text</a>
CSS:
CSS：
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
Live Demo: http://codepen.io/candid/pen/NxWoJL
现场演示：http: //codepen.io/candid/pen/NxWoJL
If for some reason you only want to do this on mobile display simply wrap .navbar-brand in a media query...
如果出于某种原因您只想在移动显示上执行此操作，只需将 .navbar-brand 包装在媒体查询中...
/* CENTER ON MOBILE ONLY */
@media (max-width: 768px) {
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
}
回答by Joseph
This has been asked before a few times, like here.
这已经被问过几次了，比如这里。
I've set up a jsfiddle similar to your HTML provided, using your Gravatar since your logo wasn't available: http://jsfiddle.net/q68VS/
由于您的徽标不可用，我已经设置了一个类似于您提供的 HTML 的 jsfiddle，使用您的 Gravatar：http: //jsfiddle.net/q68VS/
Important CSS:
重要的 CSS：
.nav-center {
margin:0;
float:none;
}
.navbar-inner{
text-align:center;
}
回答by Jonathan Batista
The method shown by bwillis works nicelly, but I had to add some margin to my navbar-collapse. Then for me it was:
bwillis 显示的方法效果很好，但我不得不为我的导航栏折叠添加一些边距。然后对我来说是：
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.navbar-collapse {
margin-top: 50px;
}
I also needed my navbar-nav centered,then I add:
我还需要我的导航栏导航居中，然后我添加：
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
