如何水平對齊文本和伴隨的圖像？

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%);
}

這是現場預覽