CSS a tag padding

Question

I have an href link that consists of some text and an image to the left of the text. The image is taller then the text and so the text currently displays at the top inline with the top of the image.

I want the text vertically centered. The padding doesn't work.

a.nav {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: yellow;
  text-decoration: none;
}

li.nav {
  line-height: 25px;
  display: block;
  padding-top: 15px;
}

<ul>
  <li class="nav">
    <img align="middle" src="https://placehold.it/100x100">
    <a class="nav" href="dashboard.cfm">Dashboard</a>
  </li>
</ul>

Answer 1

You Can Try This code

    a.nav {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: yellow;
      text-decoration: none;
      display:inline-block;
      vertical-align:middle
    }

    li.nav {
      line-height: 25px;
      display: block;
      padding-top: 15px;
    }
    li.nav img {
      display:inline-block;
      vertical-align:middle
    }

    <ul>
      <li class="nav">
        <img align="middle" src="media/images/dashboard.jpg">
        <a class="nav" href="dashboard.cfm">Dashboard</a>
      </li>
    </ul>