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>

它制作了漂亮的导航栏： enter image description here

但是，我希望徽标（绿色）保持在中间位置。我将此样式添加到带有“品牌”类的标记：

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

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

enter image description here

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

Answer 1

试试这个：

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

将徽标的中心宽度设置为徽标宽度的50％和减半，以便在放大和缩小时不会出现问题。

请参阅fiddle

Answer 2

最简单的方法是 css transform ：

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

DEMO：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可用于集中品牌和其他元素。有关说明，请参阅How to position navbar contents in Bootstrap 4。

另见：

Bootstrap NavBar with left, center or right aligned items

Answer 4

老问题，但仅限后代。

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

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

Answer 5

徽标真正居中并且链接合理的解决方案。

导航的最大建议链接数为6，具体取决于eache链接中单词的长度。

如果您有5个链接，请插入一个空链接并将其设置为：

class="hidden-xs" style="visibility: hidden;"

以这种方式，链接的数量总是均匀的。

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

要查看结果，请点击运行代码段，然后点击整页

Fiddle

Answer 6

<style>
.navbar-brand {
 margin: auto;
}
</style>

<!--HTML-->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand"  href="#">
  <img src="logo goes here" width="100" height="100" class="logo" alt="" 
loading="lazy">
</a>
</nav>

Answer 7

因为它是一个 flexbox（并且可能是由于 justify-content:space-between BT4 css 属性。），如果您添加第三个元素，名称和按钮的同级元素，它会自然地将代码中的第二个元素居中。

我只是在 a 之后添加 <span>login</span>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-sm navbar-light bg-light mt-5">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#">Navbar</a>

  <span>login</span>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

7 个答案:

Bootstrap 3

Bootstrap 4