[分享]css中怎么使表格居中显示图片

在实际开发中，经常会使用表格来展示数据。但是如果表格中有图片需要居中显示，该如何实现呢？下面我们就来介绍一下使用CSS来实现表格中图片的居中显示。首先，我们需要在表格的CSS样式中添加一条属性：css...

在实际开发中，经常会使用表格来展示数据。但是如果表格中有图片需要居中显示，该如何实现呢？下面我们就来介绍一下使用CSS来实现表格中图片的居中显示。
首先，我们需要在表格的CSS样式中添加一条属性：

css
table {
  /* 设置table-layout为fixed，防止表格变形 */
  table-layout: fixed;
}

td img {
  /* 设置display为block，使得图片可占据单元格的全部宽度 */
  display: block;
  /* 设置margin为“0 auto”，即左右居中 */
  margin: 0 auto;
} 

上述代码中，我们先设置了表格布局的方式为“fixed”，这样可以防止表格在内容溢出时变形。接着，我们使用了“td img”的选择器，来对表格中的图片进行样式设置。我们将“display”属性设置为“block”，这样可以让图片占据单元格的全部宽度；同时，我们将“margin”属性设置为“0 auto”，这样就可以使图片在水平方向上居中显示了。
完整的代码如下：

html
<style>
  table {
    /* 设置table-layout为fixed，防止表格变形 */
    table-layout: fixed;
  }
  
  td img {
    /* 设置display为block，使得图片可占据单元格的全部宽度 */
    display: block;
    /* 设置margin为“0 auto”，即左右居中 */
    margin: 0 auto;
  }
</style>

<table>
  <tr>
    <td><img src="https://picsum.photos/id/1003/200/300"></td>
    <td><img src="https://picsum.photos/id/237/200/300"></td>
  </tr>
</table> 

此时，我们可以看到表格中的图片已经实现了居中显示了。需要注意的是，此方法只适用于当图片的尺寸小于单元格的宽度时。如果图片尺寸大于单元格的宽度，该方法会导致图片被裁剪掉一部分。如果要实现不被裁剪的居中显示，需要使用其他的技巧。