CSS 一个标签填充

Question

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

我希望文本垂直居中。填充不起作用。

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

只需将以下样式应用到您的图像即可。

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

Answer 2

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

Answer 3

你可以试试这个代码

    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>

CSS 一个标签填充

CSS a tag padding

css

margin

padding

你可以试试这个代码