html - Item in Navbar shifting up when adding logo -

I have recently started using Twitter Bootstrap, when I create a navbar, then my login items will be centered Instead, when I add a logo, it is moved

It looks like it appears with a logo on the left side of the bar (you can not see the logo in the picture) I "login in" I want to have the item in the middle of the Black Naubar. any idea? What does it look like is that the logo sprinkles down the bar, except for the black space below, possibly another reason that my vertical divider does not reach the bottom.

Here's a picture:

Here's the navigator code:

  & lt; Div class = "navbar navbar-fixed-top" & gt; & Lt; Div class = "navbar-inner" & gt; & Lt; Div class = "container" & gt; & Lt ;! - Escapeable NAV bar - & gt; & Lt; A class = "btn btn-nebahar" data-toggle = "collapse" data-target = ". -Nav-collapse" & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / A & gt; & Lt ;! - Your site's name for the top left corner of the site - & gt; & Lt; A class = "brand" & gt; & Lt; Img name = "" src = "logo.png" alt = "" & gt; & Lt; / A & gt; & Lt ;! - Navy bar start of content - & gt; & Lt; Div class = "nav-collapse" & gt; & Lt ;! - Other NAV Bar Content - & gt; & Lt ;! - Drop down menu - & gt; & Lt; Ul class = "nav pull-right" & gt; & Lt; Li class = "divider-vertical" & gt; & Lt; / Li & gt; & Lt; Li class = "drop down" & gt; & Lt; Class = "dropdown-toggle" href = "#" data-toggle = "dropdown" & gt; Login & lt; Strong class = "carat" & gt; & Lt; / Strong> & Lt; / A & gt; & Lt; Div class = "dropdown-menu" style = "padding: 15px; padding-down: 0px;" & Gt; & Lt ;! - Entry form here - & gt; & Lt; Form action = "checkogin.fpp" method = accept "post" - charset = "UTF-8" & gt; & Lt; Input id = "user name" style = "margin-down: 15px;" Type = "text" name = "username" size = "30" placeholder = "email" /> & Lt; Input id = "password" placeholder = "password" style = "margin-down: 15px;" Type = "password" name = "password" size = "30" /> & lt; Input id = "user_remember_me" style = "float: left; margin-right: 10px;" Type = "checkbox" name = "user [remember]" value = "1" /> & Lt; = "User_remember_me" & gt; for label class = "string optional" Me & lt; / Labels & gt; Remember & lt; Input id = "submit" name = "submit" class = "btn btn-primary" style = "clear: left; width: 100%; height: 32px; font-size: 13px;" Type = "submit" value = "sign in" /> & Lt; / Form & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 Edit: Adding this CSS rule fixes it, but is there any other solution?  
  .nav li {padding-top: 5px; } Vertical centering is a pain - there are ways to do this but it will be 'unnecessarily complicated for your situation, it is not recommended, it is best to give NAV a certain height, and either button or logo Take it clearly (for example, as you suggested using the top padding) so that everything is well-focused.  
   
 
 Use CSS to set:  
 
 
 Logo image size currently ( Height: 30px;).  
 
 Use CSS to set nav at a fixed height and add overflow: does not spread on the image that is hidden (height: 30px; overflow: hidden;).