在 Bootstrap 导航栏中居中品牌徽标

Posted

技术标签:

【中文标题】在 Bootstrap 导航栏中居中品牌徽标【英文标题】:Centering brand logo in Bootstrap Navbar 【发布时间】:2014-06-17 11:46:41 【问题描述】:

我正在尝试实现一个 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>

它部分解决了问题:徽标在中间,但它会将其余的导航栏元素向下推:

这是我想消除的不良影响。你能提出一个解决方案吗?也许从一开始就将徽标居中是一种错误的方法?

【问题讨论】:

这对我来说就像 Bootstrap 2 【参考方案1】:

试试这个:

.navbar 
    position: relative;

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

将徽标居中 50% 并减去徽标宽度的一半,以便在放大和缩小时不会出现问题。

见fiddle

【讨论】:

我只想在移动(screen-sm)设备上将徽标居中,所以我编写了一个媒体查询,将位置设置为绝对,将 margin-left 偏移徽标宽度的 1/2图像,并将左侧值设置为 50%。像魅力一样工作。 把“.brand”改成“.navbar-brand”就可以了。 您现在可以使用 transform:translateX(-50%) 而不是 margin-left 来处理任何徽标宽度。 @Lee,这是一个更好的解决方案。此外,对于将来按原样使用答案的任何人,“徽标宽度”包含填充。我的徽标图像是 130 像素宽,但默认引导填充增加了 30 个额外像素,因此我必须使用 margin-left: -80px !important; 才能适当地居中。只需按照李的建议使用transform。它工作得更好(至少在 Chrome 中)。【参考方案2】:

最简单的方法是css变换

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

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


这种方式也适用于标志的动态大小的背景图片,并允许我们使用 text-hide 类:

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) 


【讨论】:

我更喜欢你的解决方案!谢谢! 实际上,当nav折叠时,这可能不起作用!无法点击按钮下拉菜单! @Hardycore 没有注意到这一点。不过很容易修复。我更新了代码笔。只需添加.navbar-toggle z-index: 1; 【参考方案3】:

2018 年更新

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

引导程序 4

在 Bootstrap 4 中,mx-auto 或 flexbox 可用于将品牌和其他元素居中。有关说明,请参阅How to position navbar contents in Bootstrap 4。

另见:

Bootstrap NavBar with left, center or right aligned items

【讨论】:

“编辑”解决方案是完美的。我不得不使用这种方法而不是更简单的绝对居中方法,因为它会干扰我网站的谷歌分析并扩展到整个页面。【参考方案4】:

老问题,但仅供后人参考。

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

.navbar-brand

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

【讨论】:

这是唯一适合我的动态品牌图片尺寸的解决方案【参考方案5】:
<style>
.navbar-brand 
 margin: auto;

</style>

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

【讨论】:

【参考方案6】:

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

导航的最大推荐链接数为 6,具体取决于每个链接中单词的长度。

如果您有 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"  ></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>

要查看结果,请点击run sn-p,然后点击full page

Fiddle

【讨论】:

【参考方案7】:

由于它是一个 flexbox(可能是由于 justify-content:space-between BT4 css 属性。),如果您添加第三个元素,名称和按钮的兄弟,它自然会在代码中居中第二个元素。

我只是在a之后添加&lt;span&gt;login&lt;/span&gt;

<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 导航栏中居中品牌徽标的主要内容,如果未能解决你的问题,请参考以下文章

在 Bootstraps 导航栏中居中图像/徽标?

Bootstrap - 如何将徽标添加到导航栏类?

在标题/导航栏中居中徽标[重复]

Bootstrap 导航栏中的左侧徽标和居中标题

如何在 Bootstrap 4 中居中导航栏链接 [重复]

菜单项未清除 Bootstrap 导航栏中的徽标