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

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>

标签： htmlcss

Answer 1

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