在实际开发中,经常会使用表格来展示数据。但是如果表格中有图片需要居中显示,该如何实现呢?下面我们就来介绍一下使用CSS来实现表格中图片的居中显示。首先,我们需要在表格的CSS样式中添加一条属性:css
css table { /* 设置table-layout为fixed,防止表格变形 */ table-layout: fixed; } td img { /* 设置display为block,使得图片可占据单元格的全部宽度 */ display: block; /* 设置margin为“0 auto”,即左右居中 */ 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>
粉丝
0
关注
0
收藏
0