当先锋百科网

首页 1 2 3 4 5 6 7

CSS表格是网页开发中常用的元素。在表格中添加图片是一种常见的需求。但是很多开发者会遇到一个问题,就是如何让表格中的图片居中显示呢?本文将介绍一种实现图片居中的方法。

.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
max-width: 100%;
max-height: 100%;
}

以上是实现图片居中的关键代码,首先我们将表格设置为display: table,将每一行设置为display: table-row,每一个单元格设置为display: table-cell,然后将单元格的垂直居中和水平居中样式设置为vertical-align: middle和text-align: center。这样就可以实现图片在单元格中的水平垂直居中。

为了保证图片不会撑破单元格,我们还设置了img标签的max-width和max-height样式。

通过以上代码,我们就可以实现表格中的图片居中显示了。