Élément dans Navbar se déplaçant lors de l'ajout de logo

Question

J'ai récemment commencé à utiliser Twitter Bootstrap. Lors de la création d'une barre de navigation, mon élément de connexion est décalé vers le haut, au lieu d'être centré, lorsque j'ajoute un logo.

Voici à quoi cela ressemble avec un logo ajouté à l'extrême gauche de la barre (vous ne pouvez pas voir le logo dans l'image). Je veux que l'élément "Connexion" soit au milieu de la barre de navigation noire. Des idées? Ce à quoi il ressemble, c'est que le logo étire la barre vers le bas, laissant un espace noir en dessous, probablement une autre raison pour laquelle mon diviseur vertical n'atteint pas le fond.

Voici une photo: http://i.imgur.com/hL3nQ.png

Voici le code barre de navigation:

<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> 

Edit: L'ajout de cette règle CSS fixe, mais sont-il d'autres solutions?

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

Answer 1

centrage vertical est une douleur - il y a des façons de le faire, mais ce sera inutilement compliqué pour votre situation, il est donc pas recommandé. Il est préférable de donner à la navigation une hauteur fixe, et soit de déplacer les boutons ou le logo explicitement (par exemple en utilisant les rembourrages supérieurs comme vous l'avez suggéré) afin que tout soit centré correctement.

Il existe d'autres solutions possibles le long de ces lignes:

1. utiliser une version plus petite de l'image du logo qui ne tend pas vers le bas la barre de navigation. Utilisez CSS pour définir la taille de l'image du logo à quelque chose de plus petit que ce qu'il est actuellement (height: 30px;). Utilisez CSS pour définir le nav à une hauteur fixe et ajouter un débordement: caché de sorte que l'image ne déborde pas. (hauteur: 30px; débordement: caché;).