title: Valign Text Within A Hyperlink List Block Nav
body: <p><a href="http://cssdesk.com/sv2Wq" rel="nofollow">http://cssdesk.com/sv2Wq</a></p>
  
  <p>I'm trying to vertically align the text in respective <code>&lt;li&gt;</code>. The way I built it it doesn't really seem possible to do since the box itself is the link.</p>
  
  <p>This is the standard way to do a simple navbar, right?</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; 
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;title&gt;
  &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="navbar"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="home.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="news.php"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="roster.php"&gt;Roster&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="forums.php"&gt;Forums&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>--</p>
  
  <pre class="lang-css prettyprint-override"><code>body, div, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input,textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  }
  
  body {
  background-image:url("images/gradients/background_gradient.png");
  }
  
  #wrapper {
  margin: auto;
  min-height: 1152px;
  width: 1536px;
  }
  
  #navbar {
  border: 1px solid red;
  height: 200px;
  width: 100%;
  font-size: 2em;
  margin: 0;
  }
  
  #navbar a {
  text-decoration: none;
  }
  
  #navbar ul {
  display: block;
  list-style-type: none;
  }
  
  #navbar ul li a {
  float: left;
  display: block;
  height: 200px;
  width: 20%;
  text-align: center;
  letter-spacing: -0.5px;
  }
  
  #navbar ul li :hover{
  background-color: white;
  }
  </code></pre>