在Bootstrap 3 Navbar中居中的品牌标识

Question

我正在尝试实施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>

它制作了漂亮的导航栏:

但是,我希望徽标(绿色)始终保持在中间位置.我将此样式添加到带有"品牌"类的标记中:

<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
                <img src="/Content/themes/next/images/logo.png" /></a>

它部分地解决了这个问题:徽标位于中间,但它将其余的导航栏元素向下推:

这是一种我想消除的不良影响.你能建议一个解决方案吗？也许从一开始就以徽标为中心是错误的做法？

Answer 1

试试这个:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

将徽标对准徽标宽度的50%和减半,以便在放大和缩小时不会出现问题.

看小提琴

Answer 2

最简单的方法是css转换:

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

演示:http://codepen.io/candid/pen/dGPZvR

这种方式也适用于徽标的动态大小的背景图像,并允许我们使用文本隐藏类:

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-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;
}

演示:http://codepen.io/candid/pen/yeLZax

要仅在移动设备上实现这些结果,只需将上述css包装在媒体查询中:

@media (max-width: 768px) {

}

Answer 3

2018年更新

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可用于集中品牌和其他元素.有关说明,请参阅如何在Bootstrap 4中定位导航栏内容.

另见:

带有左,中或右对齐项目的Bootstrap NavBar

Answer 4

老问题,但仅适用于后代.

我发现最简单的方法是将图像作为导航栏品牌的背景图像.只需确保放入自定义宽度.

.navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}