CSS 如何在表格单元格中居中图像

在 HTML 表格中，我们经常需要在单元格中添加图片。但是如何让这些图片居中呢？本文将介绍几种 CSS 居中图像的方法。

方法一：使用 text-align 属性

可以使用 text-align 属性设置单元格中内容的水平对齐方式。将其设为 center 即可让图像水平居中。

td {
  text-align: center;
}

但是，这只对图片居中有用，对于单元格中还有其他文本的情况，会将文本也一起居中，这可能不是我们想要的效果。

方法二：使用表格布局

可以使用表格布局，即 display: table-cell 来实现图像垂直居中和水平居中。

td {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

这种方法不仅可以解决图片居中的问题，同时可以让单元格中的其他文本也垂直居中。

方法三：使用 flex 布局

使用 flex 布局也可以实现图像的水平和垂直居中。将单元格设置为 flex 容器，将其内容（即图像）垂直和水平居中即可。

td {
  display: flex; /* 将单元格设置为 flex 容器 */
  /* 垂直居中和水平居中 */
  justify-content: center;
  align-items: center;
}

结论

以上三种方法都可以实现图像的水平和垂直居中，具体使用哪种方法取决于你的具体需求。

如果你只需要让图像水平居中，可以使用第一种方法；如果你需要让图像垂直和水平居中，可以使用第二种方法或第三种方法。