时间戳

首页 > 解决方案 > 如何将图像大小调整为行高，同时显示居中文本？

html - 如何将图像大小调整为行高，同时显示居中文本？

问题描述

我需要显示这样的表格，但即使表格中的图像大小不同，也要让行的高度相同。该表需要响应，以便所有内容都随着窗口大小的变化而调整大小。

在此处输入图像描述

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

<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>

完整的代码在这里。

这样做的问题是行大小根据徽标的大小而有所不同。您可以看到 Pirates 的 logo 比 Cardinals 的 logo 大，因此 Pirates 的行高更高。

根据此答案，我已成功将徽标的大小调整为与行相同的高度。不过，这涉及绝对定位徽标。代码在这里（参见我进行更改的第 7 行）。这种方法的问题是我无法弄清楚如何将文本（@ 符号和团队名称）与团队徽标一起显示。显然我不能使用显示内联块，因为我已经绝对定位了徽标。所以，我的问题是：如何将团队徽标的大小调整为行的高度，同时还显示与文本内联的徽标（居中）？

标签： htmlhtml-table

解决方案

放弃 abspos 方法。

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

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

<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>

推荐阅读