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>

score 1 · Accepted Answer · answered Aug 03 '18 at 10:05

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>

score 0 · Answer 2 · answered Aug 03 '18 at 10:02

0

Simply apply following style to your image.

<img align="middle" src="media/images/dashboard.jpg" style="vertical-align:middle;">

answered Aug 03 '18 at 10:02

Charu Maheshwari

1,583
1
8
9

score 0 · Answer 3 · answered Aug 03 '18 at 10:02

With vertical-align:middle - no need for padding at all

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

li.nav {
  line-height: 25px;
  display: block;
  vertical-align:middle;
}

<ul>
  <li class="nav">
    <img align="middle" src="http://www.fillmurray.com/140/100">
    <a class="nav" href="dashboard.cfm">Dashboard</a>
  </li>
</ul>

CSS a tag padding

3 Answers3

You Can Try This code