html - 在 div 中垂直居中链接图像

Question

您好，我正在创建一个包含左侧跨度和右侧图像的 div。两者都应该居中。我在文本上使用行高，但这似乎不适用于 img。我怎样才能使它居中？

.stat-row1 {
    border: 1px solid;
    height: 40px;
}

.stat-row1 span {
   line-height: 40px;
}

<div class="stat-row1"><span>1.70</span><span style="float: right; "><a href="https://danskespil.dk/oddset/"><img border="0" style="float: right; height: 30px;" alt="Oddset" src="http://www.ggwp.dk/wp-content/uploads/2015/02/oddset.png"></a></span></div>

Answer 1

因为您已经 float 了 <span>在右侧，您不需要 float 图像本身。由于您设置了 line-height , 你可以使用 vertical-align:middle在图像上。

.stat-row1 {
  border: 1px solid;
  height: 40px;
}
.stat-row1 span {
  line-height: 40px;
}
.stat-row1 span.image {
  float: right
}
.stat-row1 span.image img {
  vertical-align: middle;
  height: 30px;
}

<div class="stat-row1">
  <span>1.70</span>
  <span class="image">
    <a href="https://danskespil.dk/oddset/">
      <img border="0" alt="Oddset" src="http://www.ggwp.dk/wp-content/uploads/2015/02/oddset.png">
    </a>
   </span>
</div>