我正在尝试实现一个 Bootstrap 3 导航栏,以便品牌 Logo 始终保留在中间。这是代码:
<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>
它使导航栏看起来很漂亮:
但是,我希望 Logo (绿色)始终保持在中间。我将这种样式添加到带有“品牌”类的标签中:
<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
<img src="/Content/themes/next/images/logo.png" />
</a>
它部分解决了问题: Logo 位于中间,但它将其余导航栏元素向下推:
这是我想消除的不良影响。你能提出一个解决方案吗?也许从一开始就将 Logo 居中的方法是错误的?
最佳答案
试试这个:
.navbar {
position: relative;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
将 Logo 居中 50% 并减去 Logo 宽度的一半,以便在放大和缩小时不会出现问题。
参见 fiddle
关于css - 在 Bootstrap Navbar 中居中品牌标志,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23400234/