CSS标签填充

Question

我有一个href链接，该链接由一些文本和文本左侧的图像组成。图片比文字高，因此，文字当前显示在图片顶部的顶部。

我希望文本垂直居中。填充无效。

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

您可以尝试使用此代码

    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>

Answer 2

只需将以下样式应用于您的图片即可。

local

Answer 3

使用vertical-align:middle-完全无需填充

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>