如何将图像调整为行高，同时以居中文本显示内联？

Question

我需要像这样显示一个 table，但是即使 table 中的图像大小不同，所有行的高度都相同。 table 需要响应，以便所有内容都随着 window 大小的更改而调整。

每一行的当前代码是这样的：

<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
    <td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
    <td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center">@ <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
    <td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>

完整代码为here。

问题是行的大小会根据徽标的大小而变化。您可以看到海盗队的徽标比红雀队的徽标大，因此海盗队的行高更高。

我已成功将徽标的大小调整为与行的高度相同，基于 . This involved positioning the logo absolutely, though. The code for this is here（请参阅我进行更改的第 7 行）。这种方法的问题是我无法弄清楚如何将文本（@ 符号和团队名称）与团队徽标一起内联显示。显然我不能使用显示内联块，因为我已经绝对定位了徽标。所以，我的问题是：如何将团队徽标的大小调整为行的高度，同时还显示与文本内嵌的徽标（居中）？

Answer 1

废弃 abspos 方法。

对于所有 img 徽标，删除 width='15%' 属性。

添加一个 vh 高度属性随 window 的高度变化，例如

<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>

<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>

如何将图像调整为行高，同时以居中文本显示内联？

How to resize image to row height, while displaying inline with centered text?

html

html-table