时间戳

首页 > 解决方案 > 表格单元格中的中心图像，没有劣质空间

html - 表格单元格中的中心图像，没有劣质空间

问题描述

我有一个 HTML 表，其中一列有缩略图。

table {
    border-collapse:collapse;
}
td,th {
    border:1px solid;
    padding:0;
}
td:nth-child(2) {
    /*display:flex;
    justify-content:center;*/
    text-align:center;
}
img {
  max-height:2em;
  /*display:block;*/
}
<table>
  <tr><th>col1</th><th>col2</th><th>col3</th></tr>
  <tr><td>a</td><td><img src='https://upload.wikimedia.org/wikipedia/commons/3/30/Dolphintursiops.jpg' /></td><td>c</td>
  <tr><td>d</td><td><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Dolphind.jpg/320px-Dolphind.jpg' /></td><td>f</td>
  <tr><td>g</td><td><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Killerwhales_jumping.jpg/320px-Killerwhales_jumping.jpg' /></td><td>i</td>
</table>

如果我添加display:block到图像中，每个图像下方的空间都会消失，但我无法再将它们居中。

我尝试以 为中心display:flex;justify-content:center，但奇怪的是，这会在每个单元格上创建更厚的边框。

如何在不创建额外空间或较粗边框的情况下使图像居中？

标签： htmlcssimage

解决方案

推荐阅读