title: No matter what I try, I can not vertically align this
body: <p>I want to do is vertically align this text, and it has become a huge struggle. Any help would be greatly appreciated.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;ul id="nav"&gt;
          &lt;li&gt;
              &lt;a href="web2home.html"&gt;HOME&lt;/a&gt;
              &lt;span&gt;See who Matthew H. Goodman is&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="web2cv.html"&gt;CV&lt;/a&gt;
              &lt;span&gt;View his current Curriculum Vitae&lt;/span&gt; 
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;RESEARCH&lt;/a&gt;
              &lt;span id="spectab"&gt;&lt;a href="#"&gt;Current work&lt;/a&gt;&lt;/span&gt;
              &lt;span id="spectab2"&gt;&lt;a href="#"&gt;Presentations&lt;/a&gt;&lt;/span
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="web2con.html"&gt;CONTACT&lt;/a&gt;
              &lt;span&gt;Send an email directly to Matthew&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>    #nav li #spectab{
        transition: all 1s;
        position: absolute;
        left: -300px;
        display: block;
        width: 175px;
        background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
        z-index: -1;
        border-radius: 10px;
        color: white;
        font-size: 20px;
        padding: 0px;
        overflow: hidden;
      }
  </code></pre>