在 Bootstrap 导航栏中居中品牌徽标 [英] Centering brand logo in Bootstrap Navbar

问题描述

我正在尝试实施 Bootstrap 3 导航栏，以便品牌徽标始终保持在中间.这是代码:

<div class="navbar-inner"><div class="容器"><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><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="#">项目 1</a></li><li><a href="#">项目 1</a></li><li><a href="#">项目 1</a></li>
<ul class="nav pull-right"><li><a href="#"><div class="nextCog"></div></a><span class="navbar-text pull-right">superpup1 </span>

它是一个漂亮的导航栏:

但是，我希望徽标(绿色)始终保持在中间.我将此样式添加到带有brand"类的标签中:

I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle. This is the code:



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





It makes a nice looking navbar:


However, I would like the logo (green) remain in the middle persistently. I am adding this style to the  tag with "brand" class:
<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
  <img src="/Content/themes/next/images/logo.png" />
</a>
It partially solves the problem: the logo is in the middle but it pushes the rest of the navbar elements down:



This is an undesirable effect that I would like to eliminate. Could you suggest a solution? Maybe it's a wrong approach to centering a logo from the start ?
解决方案
Try this:
.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}
Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

See fiddle

                        
这篇关于在 Bootstrap 导航栏中居中品牌徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！