在Bootstrap 3 Navbar中集中品牌标志
我正在尝试实施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/nexthttp://img.dovov.comlogo.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> 它使得一个漂亮的导航栏： 
不过，我希望标志（绿色）始终保持在中间。 我将这种风格添加到“品牌”类的标签：
<a class="brand" style="margin: 0; float: none; text-align:center" href="#"> <img src="/Content/themes/nexthttp://img.dovov.comlogo.png" /></a>
它部分地解决了这个问题：标志在中间，但是它推动了其余的导航栏元素：
这是我想消除的不良影响。 你能build议一个解决scheme吗？ 也许这是一个从一开始就把标识置于中心的错误方法？
尝试这个：
.navbar { position: relative; } .brand { position: absolute; left: 50%; margin-left: -50px !important; /* 50% of your logo width */ display: block; }
将您的徽标居中放置50％，减去徽标宽度的一半，以便在放大和缩小时不会出现问题。
看小提琴
最简单的方法是CSS转换 ：
.navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; }
DEMO： http : //codepen.io/candid/pen/dGPZvR
这种方式也适用于标志的dynamic大小的背景图像 ，并允许我们使用文本隐藏类：
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：
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text </a>
我们也可以使用flexbox。 但是，使用这种方法，我们必须移动navbar-header之外的navbar-header navbar-brand 。 这种方式是伟大的，因为我们现在可以有图像和文字并排：
.brand-centered { display: flex; justify-content: center; position: absolute; width: 100%; left: 0; top: 0; } .navbar-brand { display: flex; align-items: center; }
演示： http : //codepen.io/candid/pen/yeLZax
要在移动设备上实现这些结果，只需将上述CSS包装在媒体查询中即可：
@media (max-width: 768px) { }
2017年更新
Bootstrap 3
看看这个例子是否有帮助： http : //bootply.com/mQh8DyRfWY
该品牌使用..
.navbar-brand { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; }
您的标记是Bootstrap 2，而不是3.不再有一个navbar-inner 。
编辑 – 另一种方法是使用transform: translateX(-50%);
.navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; }
http://www.bootply.com/V7vKDfk46G
Bootstrap 4
在Bootstrap 4中，可以使用mx-auto或flexbox将品牌和其他元素居中。 有关说明，请参阅如何在引导程序4中定位导航栏内容 。
另请参阅：
引导NavBar与左，中间和右alignment的项目
老问题，但只是为了后代。
我发现最简单的方法是将图像作为导航品牌的背景图像。 只要确保放在一个自定义的宽度。
.navbar-brand { margin-left: auto; margin-right: auto; width: 150px; background-image: url('logo.png'); }
一个解决scheme的标志是真正的中心和链接是合理的。
导航的最大build议链接数是6，具体取决于eache链接中单词的长度。
如果您有5个链接，请插入一个空链接并使用它进行设置：
class="hidden-xs" style="visibility: hidden;"
这样链接的数量总是平均的。
<link href="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>
