title: CSS3 Text Won't Vertically Align
body: <p>I'm trying to make a footer for my website but the text inside the footer is displaying half in and half out of the footer div. I attempted to correct it using all the methods suggested in <a href="https://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css">How do I vertically center text with CSS?</a> and searched other ideas on the internet but none worked (unless I messed up applying them to my code). Here's my code.
  JSFiddle: <a href="http://jsfiddle.net/xyqgpr14/2/" rel="nofollow noreferrer">http://jsfiddle.net/xyqgpr14/2/</a></p>
  
  <p>Footer html</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-bottom" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;Footer&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Style CSS:</p>
  
  <pre><code>.navbar-bottom {
      background-color: #222;
      border-top: 2px solid #000;
      height: 50px;
      color: #777;
      text-align: center;
  }
  </code></pre>