具有中心对齐项目的Bootstrap NavBar

时间:2015-03-09 15:29:26

标签: html css twitter-bootstrap

左侧是我的品牌名称。 我尝试将文本和图标集中在导航栏中。但它始终位于品牌名称的左侧。

<div class="navbar navbar-fixed-top hidden-sm hidden-xs">
  <div class="navbar-inner">
    <div style="" class="container-fluid navi">
        <div class="navbar-header">
          <p class="navbar-brand brand">Lapsy</p>
        </div>
        <div>
          <ul class="nav navbar-nav navbar-center">
            <li>Follow us</li> 
            <li><img src="img/f.png" alt="Facebook Fanpage" class="img-responsive">  </li>
            <li><img src="img/t.png" alt="Twitter Fanpage" class="img-responsive">  </li>
          </ul>
        </div>
      </div>
  </div>
</div>

1 个答案:

答案 0 :(得分:1)

text-align:center提供给navbar-inner类,并将text-align:left提供给您的品牌名称。 注意我将display:inline属性提供给ul li,以便将它们放在一行中。你可以在这里看到结果。 http://jsfiddle.net/5t5sfx5h/