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;溢出：隐藏;）。