title: Vertically align text in navbar that includes a logo
body: <p>The logo in my navbar is aligned left and the links in are aligned right but the links are sitting off center vertically within the navbar. No matter what I do I cannot get it to center. Thanks in advance for any help. Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="navbar-fixed"&gt;
      &lt;nav&gt;
        &lt;div class="nav-wrapper"&gt;
          &lt;ul&gt;
  
          &lt;a href = "index.html" class = "nav-logo"&gt;&lt;img src="images/mo's_logo.png" title = "Go to Mo's Gyros Home" alt = "Mo's Gyros logo"&gt;&lt;/a&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "#"&gt;Specials&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "#"&gt;Events&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt; &lt;!-- end of nav-wrapper --&gt;
      &lt;/nav&gt;
    &lt;/div&gt; &lt;!-- end of navbar-fixed --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#nav-wrapper {
  }
  
  nav { 
          width: 100%;
          height: 38px;
          padding: 5px;
          position: fixed;
          background-color: #5c5453;
  }
  
  .navbar-fixed {
          padding: 0;
  }
  
  .nav-logo {
          float: left;
          padding-left: 160px;
  }
  
  nav li { 
          display: inline;
          list-style-type: none;
          padding-right: 50px;
  }
  
  a { 
          color: #8CBAD9;
          text-decoration: none; 
  }
  
  a:hover { 
          color: white;
          text-decoration: underline;
  }
  
  ul {
      text-align: right;
  }
  </code></pre>