title: HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent
body: <p>I've got an unordered list which holds a few items. It's purpose is to become a navbar. The list is set up to be displayed as a table-row with each li element a table-cell, these elements each hold an anchor tag with the first one holding the logo. The issue is that the anchor elements are positioned to the bottom vertically and I can't find a way to center them.</p>
  
  <p>Here's an image of the issue:</p>
  
  <p><img src="https://i.stack.imgur.com/dJ2K5.jpg" alt="enter image description here"></p>
  
  <p>I've colored the <code>&lt;a&gt;</code> background green and <code>&lt;li&gt;</code> background red. As it's visible here the text anchor items are positioned to the bottom and I can't figure out how to:</p>
  
  <p>a) position the anchor text to the vertical center<br>
  b) have the anchor fill the entire height of the parent li</p>
  
  <p>I've tried adding <code>vertical-align: center;</code> to both li and a but it did not work.</p>
  
  <p>Here are relevant pieces of my html/css code so far  </p>
  
  <p>HTML:  </p>
  
  <pre><code>&lt;body&gt;
          &lt;header class="mainHeader"&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;&lt;img class="logo" src="logo.png" alt="index"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Item1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Item2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Item3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:  </p>
  
  <pre><code>.mainHeader {
      background-color: #111;
      color: #999;
  
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#111), to(#444));
      background-image: -webkit-linear-gradient(#111, #444);
      background-image: -moz-linear-gradient(#111, #444);
      background-image: -o-linear-gradient(#111, #444);
      background-image: linear-gradient(#111, #444);
  
      -webkit-box-shadow: 0 1px 1px #777;
      -moz-box-shadow: 0 1px 1px #777;
      box-shadow: 0 1px 1px #777;
  
      text-decoration: none;
      text-shadow: 0 1px 0 #777;
  
      overflow: hidden;
  }
  
  .logo {
      max-width: 130px;
      max-height: 170px;
  }
  
  .mainHeader ul{
      display: table-row;
  }
  
  .mainHeader li{
      width: 130px;
      display: table-cell;
      text-align: center;
      background-color: red;
  }
  
  .mainHeader a{
      display: block;
      background-color: green;
      text-decoration: none;
      color: #999;
  }
  </code></pre>