title: Vertically aligning text inside a span
body: <p>JSFiddle here - <a href="http://jsfiddle.net/2R36y/" rel="noreferrer">http://jsfiddle.net/2R36y/</a></p>
  
  <p>Relevant span code - </p>
  
  <h2>CSS</h2>
  
  <pre><code>nav ul li a span {
      font: 30px"Dosis", sans-serif;
      text-transform: uppercase;
      position: relative;
      left: 120px;
      width: inherit;
      height: inherit;
      display: none;
      text-align: left;
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt; &lt;a href="#"&gt;
                  &lt;span&gt;Home&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;
                  &lt;span&gt;About&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;
                  &lt;span&gt;Portfolio&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;
                  &lt;span&gt;Contact&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>