css table中按钮居中显示图片

CSS中的table是一种常用的布局方式，但是在table中使用图片按钮时，可能会遇到图片无法居中显示的问题。接下来，我们将介绍如何使用CSS让按钮在table中居中显示图片。

/*CSS样式*/
td {
   text-align: center; /*使文字和图片都居中显示*/
}

.btn {
   display: inline-block; /*使按钮成为行内元素*/
   width: 100px; /*按钮宽度*/
   height: 50px; /*按钮高度*/
   background-image: url("btn.png"); /*设置按钮的背景图片*/
   background-size: cover; /*使背景图片撑满按钮*/
   color: #fff; /*文字颜色*/
   font-size: 16px; /*文字大小*/
   text-align: center; /*使文字居中显示*/
   line-height: 50px; /*文字和图片垂直居中*/
}

我们先来看HTML部分：

按钮

上述代码创建了一个table，其中包含一个按钮。注意，按钮的class为“btn”，这是我们后面CSS样式所需的。

在CSS样式中，我们首先将table中的所有单元格（td）文本都居中显示，这样可以让按钮中的文字和图片都居中显示。接着，我们为按钮设置样式，让其成为一个行内元素（即同一行中其他元素也可以与之并列），并设置好按钮的宽高、背景图片、文字颜色等。最后，我们设置按钮中文字和图片在垂直方向上居中，这样可以让按钮看起来更美观。

通过以上CSS样式，我们就可以实现在table中让按钮居中显示图片的效果啦！