Navbar中的項目在添加徽標時向上移動

Question

我最近開始使用Twitter Bootstrap。當創建一個導航欄時，當我添加一個標誌時，我的登錄項目會被向上移動，而不是居中。

這就是它看起來的樣子，在酒吧的最左邊添加了一個標誌（圖片中看不到徽標）。我希望「登錄」項目位於黑色導航欄的中間。有任何想法嗎？它看起來像是徽標拉下酒吧，留下黑色空間，可能是爲什麼我的垂直分隔線沒有達到底部的另一個原因。

這裏是一個事先知情同意： http://i.imgur.com/hL3nQ.png

這裏是導航欄代碼：

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
<div class="container"><!-- Collapsable nav bar --> 
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</a> 

<!-- Your site name for the upper left corner of the site --> 
<a class="brand"><img name="" src="logo.png" alt=""></a> 

<!-- Start of the nav bar content --> 
<div class="nav-collapse"><!-- Other nav bar content --> 

<!-- The drop down menu --> 
<ul class="nav pull-right"> 
<li class="divider-vertical"></li> 
<li class="drop down"> 
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Log In <strong  
class="caret"></strong></a> 
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;"> 
<!-- Login form here --> 
<form action="CheckLogin.php" method="post" accept-charset="UTF-8"> 
<input id="username" style="margin-bottom: 15px;" type="text" name="username" size="30" 
placeholder="Email"/> 
<input id="password" placeholder="Password" style="margin-bottom: 15px;" 
type="password" name="password" size="30" /> 
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" 
name="user[remember_me]" value="1" /> 
<label class="string optional" for="user_remember_me"> Remember me</label> 

<input id = "submit" name = "submit" class="btn btn-primary" style="clear: left; width: 
100%; height: 32px; font-size: 13px;" type="submit" value="Log in" /> 
</form> 
</div> 
</li> 
</ul> 
</div> 
</div> 
</div> 
</div> 

編輯：添加此CSS規則修復它，但是否有任何其他解決辦法？

.nav li 
{ 
padding-top:5px; 
} 

Answer 1

垂直居中是一種痛苦 - 有很多方法可以做到這一點，但它會被不必要地複雜化了您的情況，所以不推薦使用。最好給nav一個固定的高度，並且明確地移動按鈕或徽標（例如，按照您的建議使用頂部填充），以便所有內容都能正確居中。

有沿着這些路線的其他可能的解決方案：

1. 使用不會延伸到了導航欄的標誌圖像的縮小版。

2. 使用CSS將標誌圖像的尺寸設置爲明顯小於它當前的尺寸（高度：30px;）。

3. 使用CSS將導航設置爲固定高度並添加一個溢出：隱藏，以便圖像不會溢出。 （高度：30px;溢出：隱藏;）。