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

由于您已经将<span>浮动到右侧，因此您无需浮动图像本身。由于您已设置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>

div中的垂直中心链接图像

1 个答案: