Vertical align middle not working with ul li

#leftPanel { 
  width:25%;
  display:table;
}
#leftPanel li {
  list-style: none;
  margin-bottom: 10px;
  width: 100%;
}
#leftPanel li img { 
  margin-right:10px;
}
.activeBtn, .button5 {
  display: table-cell;
  float: none;
  width: 100%;
  background:#ccc;
  height: 100%;
  vertical-align:middle;
}

<div id="leftPanel">
  <ul>
    <li>
      <a href="#" class="activeBtn"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Location &amp; Sub Location" align="left">Location: Sub Location</a>
    </li>
    <li>
      <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Issued To" align="left">Issued To</a> 
    </li>

    <li>
      <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Non Conformance Standard Items" align="left">Non Conformance Standard items</a>
    </li>
    <li>
      <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Attendee &amp; Company" align="left">Attendee : Company</a>
    </li> 
    <li>
      <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Construction Calendar" align="left">Construction Calendar</a>
    </li>    
    <li>
      <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Associate Users &amp; Permission" align="left">Associate Users : Permission</a>
    </li>
    <li>
      <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Cost Code Form" align="left">Cost Code</a>
    </li>
  </ul>
</div>