title: How do I vertically center my navigation bar?
body: <p>After searching extensively on Stack Overflow, I have not been able to answer what really should be a simple fix: How do I center my navigation bar?</p>
  
  <p>Now, before you mark this as a duplicate, please regard my code and my question.</p>
  
  <p>I am trying to make a navigation bar that looks something like this.
  <a href="http://computersciencenow.weebly.com/" rel="nofollow">http://computersciencenow.weebly.com/</a></p>
  
  <p>Where the links are the the middle of the overall bar.</p>
  
  <p>Here is my Nav Bar HTML:</p>
  
  <pre><code>&lt;div id = "navbar"&gt;
              &lt;header&gt;
                  &lt;div class="nav"&gt;
                      &lt;ul&gt;
                          &lt;li id="img" width = "350"&gt;&lt;img src="res/shahind.png" alt="Shah Industries" height = "150" width = "350" /&gt;&lt;/li&gt;
                          &lt;li class="home"&gt;&lt;a class="active" href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="tutorials"&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="about"&gt;&lt;a href="#"&gt;MISSION&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="news"&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/header&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400);
  
  body {
    margin: 0;
    padding: 0;
    background: #ccc;
  }
  
  .img{
      text-align: left;
  }
  
  
  .nav ul {
    list-style: none;
    background-color: #444;
    padding: 0;
    margin: 0;
    vertical-align: middle;
      overflow: hidden;
  }
  .nav li {
    font-family: 'Maven Pro', sans-serif;
    font-size: 1.2em;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #888;
    text-align: center;
  
  }
  
  header{
      vertical-align:center;
  }
  
  .nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
    vertical-align: middle;
    margin: 0;
  
  
  }
  
  .nav a:hover {
    background-color: #005f5f;
  }
  
  .nav a.active {
    background-color: #fff;
    color: #444;
    cursor: pointer;
  }
  
  #img{
      width:350px;
      text-align: left;
      cursor: default;
  }
  @media screen and (min-width: 600px) {
    .nav li {
  
      width: 120px;
      border-bottom: none;
      height: 50px;
      line-height: 50px;
      font-size: 1.4em;
        }
  
  
  
    .nav li {
      display: inline-block;
      margin-right: -4px;
    }
  </code></pre>
  
  <p>Full Code Is Here <a href="http://codepen.io/anon/pen/zGojxX" rel="nofollow">http://codepen.io/anon/pen/zGojxX</a></p>