Vertical alignment does not work with ul li

Question

I try to vertically align the middle licontent, but I can not do it.

#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>

    

Run codeHide result

Answer 1

The option is to use flexbox to hyperlink inside an element li

#leftPanel {
  width: 25%;
}

ul {
  width: 100%;
}

#leftPanel li {
  list-style: none;
  margin-bottom: 10px;
  width: 100%;
}

#leftPanel li a {
  display: flex;
  align-items: center;
}

#leftPanel li img {
  margin-right: 10px;
}

.activeBtn,
.button5 {
  width: 100%;
  background: #ccc;
  height: 100%;
}

<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>

Run codeHide result

Answer 2

The problem of vertical alignment is that you used the align left attribute on your image (you shouldn't use it since alignment is deprecated).

, , , , :

#leftPanel {
  width: 25%;
}

#leftPanel ul {
  display: table;  /* moved this to the ul */
  width: 100%;
}

#leftPanel li {
  display: table-row;  /* added this (just makes it a little more browser proof) */
  list-style: none;
  margin-bottom: 10px;
  width: 100%;
}

#leftPanel li img {
  margin-right: 10px;
  display:block;      /* added this to get rid of the space under the image */
}

#leftPanel li>a {        /* make the anchors table-cell */
  display: table-cell;
  background: #ccc;
  height: 100%;
  vertical-align: middle;
}

#leftPanel li>a:last-child {
  width: 100%;               /* this just makes the text field expand to take the remaining space */
}

<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"></a><a href="#" class="activeBtn">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"></a><a href="#" class="button5">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"></a><a href="#" class="button5">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"></a><a href="#" class="button5">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"></a><a href="#" class="button5">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"></a><a href="#" class="button5">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"></a><a href="#" class="button5">Cost Code</a>
    </li>
  </ul>
</div>

Hide result