title: How do I vertically align text inside an anchor element, which is nested within an unordered list
body: <p>I have searched extensively and seen numerous examples on how to <code>vertical-align</code> text using the <code>vertical-align</code> property and the <code>line-height</code> property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The <code>height</code> properties are not fixed so I can't use <code>line-height</code>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="html/login.html"&gt;Login&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="html/user_registration.html"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Programmes Offered&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt; 
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>nav
  {
      height: 30%;
      width: 100%;
  }
  
  nav ul
  {
      height: 100%;
      margin: 0px;
  }
  
  nav ul li
  {
      height: 33%;
      width: 100%;
      vertical-align: middle;
  }
  </code></pre>