css中按钮是图片居中

CSS中按钮是图片居中是许多网站的常见需求。通过使用CSS的背景图片属性以及padding和text-align属性，可以轻松地实现按钮上的图片居中。以下是如何实现：

.btn {
  background-image: url('path/to/image.png');
  background-repeat: no-repeat;
  background-position: center center;
  padding: 10px 15px;
  text-align: center;
} 

首先，我们将按钮的背景图片设置为我们想要居中的图片。我们还将background-repeat属性设置为no-repeat，以确保该图片不会重复。接下来，我们将background-position属性设置为center center，以将图片的水平和垂直位置都居中。最后，我们使用padding属性为按钮添加适当的间距，并将text-align属性设置为center，使按钮中的文本居中。这样，按钮上的图片就会完美地居中了。

需要注意的是，如果我们不想使用padding属性来添加间距，可以使用border属性来代替：

.btn {
  background-image: url('path/to/image.png');
  background-repeat: no-repeat;
  background-position: center center;
  border: 10px solid transparent;
  text-align: center;
} 

在这种情况下，我们使用border属性代替padding属性，并将其设置为透明色。这样，我们就能够达到与添加padding属性相同的效果，但图片仍将居中显示。

总之，在CSS中使按钮上的图片居中并不难，只需使用背景图片、padding或border、text-align属性即可实现。