帶圖像的Bootstrap導航鏈接

我們已將圖像添加到導航欄中的鏈接。帶圖像的Bootstrap導航鏈接

<nav class="navbar navbar-default" role="navigation"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a> 

    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#"><img src="http://placehold.it/148x50"/><br/>Link1</a> 
     </li> 
      <li><a href="#"><img src="http://placehold.it/148x50"/><br/>Link2</a> 
      </li> 
     </ul> 
    </div> 
</nav>

那麼就需要通過中心的資產淨值：

@media (min-width: 768px) { 
    .navbar-nav { 
     float:none; 
     margin: 0 auto; 
     display: table; 
     table-layout: fixed; 
    } 
}

的問題是，該文本不是在聯繫中心：

請參閱

http://jsfiddle.net/52VtD/2004/

任何註釋？！

有沒有更好的方法來做到這一點？

來源

2014-01-26 Alireza Fattahi

如果你想要的是居中的文字，只要加入此的CSS：

.navbar-nav > li > a { 
    text-align: center; 
}

更新小提琴：http://jsfiddle.net/52VtD/2006/

這個也有定心圖像的不幸後果，可能會或可能不會成爲你想要的東西（我認爲它看起來很好，但是）。

另一種更復雜的選擇是添加一個文本分度，圖像尺寸固定爲寬度：http://jsfiddle.net/52VtD/2007/

來源

2014-01-26 07:49:21

我已經添加在媒體的CSS，所以當菜單崩潰的圖像將不能居中。 http://jsfiddle.net/52VtD/2009/。那正是我正在尋找的。謝謝！ –

帶圖像的Bootstrap導航鏈接

回答

相關問題