如何在Navbar中集中品牌/形象 [英] How to Center Brand/Image in Navbar

问题描述

我一直在用这个小东西一直在挣扎。
我尝试将 .navbar-brand 置于整个导航栏的中间，并且 Bootstrap 3

：

p>

 < nav class =navbar navbar-default navbar-fixed-toprole =navigation> 
< div class =container-fluid> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls =navbar> ; 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃>< img src =img / logo.pngalt =/>< / a> 
< / div> 
< div id =navbarclass =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =add />添加您的频道< / a>< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / nav> 
  

预览： GTA5CH.AT/twitch

我想要在导航栏中间/中间的徽标，如何？

解决方案

假设你想保持菜单选项左对齐，你可以使用下面的代码完成这个工作：

  .navbar-header {
 left：50％; 
职位：亲属; 
 transform：translateX（-50％）; 
} 
  

I've been struggling all morning with this little thing. I try to center the .navbar-brand to be in the middle of the whole navigation bar with Bootstrap 3.

Could someone solve my mystery?

CODE:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <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">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="img/logo.png" alt=" "/></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="add/">Add your Channel</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
</nav>

A preview: GTA5CH.AT/twitch

I'd like the logo in the middle/center of the navbar, how to?

解决方案

Assuming you want to keep the menu options left aligned, you can accomplish this using the following:

.navbar-header{
   left: 50%;
   position: relative;
   transform: translateX(-50%);
}

这篇关于如何在Navbar中集中品牌/形象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！