Vertical align middle not working with ul li

问题

I am trying to vertical align middle li content but not able to 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>

回答1:

An option is to use a flexbox for the hyperlink inside the li element

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

回答2:

The problem of vertical alignment is because you have used the align left attribute on your image (you should not use this as align has been deprecated).

This in effect floats your image to the left destroying the natural flow of the cell which is why your text is not vertically aligned, to get around this, you can put your text and images into separate cells:

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

来源：https://stackoverflow.com/questions/45712309/vertical-align-middle-not-working-with-ul-li

标签

html

css

css3

flexbox