如何水平对齐文本和伴随的图像？

Question

这是下面代码的结果：

如果我将第一个图像放大，那么我有一个（文本远低于图像）：

现在的问题是：

如何水平对齐每个文本和图像？ （我希望图像中间的文本不在下边缘）

<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'>
<b>Diamonds: {valueY.value}</b>
</span><br>
<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'><b>Performance: {Performance}</span>

Answer 1

只需将图像vertical-align的属性从bottom转换为top。 最好将结构划分为div，以使元素设计的控制更加容易。

Answer 2

要使文本与图像相比在水平方向上居中，可以使其绝对定位并从顶部将其推入50％，然后将其推回其自身高度。因此，与左图/图标相比，它将垂直居中。这是我的意思：

<div class="wrapper">
  <img src='https://picsum.photos/200/300/?random'>
  <span>
    <b>Diamonds: {valueY.value}</b>
  </span><br>
</div>

<div class="wrapper">
  <img src='https://picsum.photos/200/300/?blur'>
  <span>
    <b>Performance: {Performance}</b>
  </span>
</div>

我将每个块都包装在div元素中，以便可以相对地放置div位置。

这是CSS：

.wrapper { position: relative; }
img {
  vertical-align: bottom; margin-right: 10px; 
  width:32px; height:30px;
}
span {
  font-size:14px; color:#000000; display: inline-block; 
  position: absolute; 
/*  push it by 50% from top  */
  top: 50%;
/*  push it back of it's own height  */
  transform: translateY(-50%);
}

Here is the live preview