[分享]css中如何将按钮居中显示图片

CSS是网页设计中必不可少的元素，它可以让我们的网页看起来更加美观和专业。在一些特殊情况下，我们需要在按钮上显示图片，并使图片居中显示。以下是如何在CSS中实现按钮居中显示图片的方法：.button ...

CSS是网页设计中必不可少的元素，它可以让我们的网页看起来更加美观和专业。在一些特殊情况下，我们需要在按钮上显示图片，并使图片居中显示。以下是如何在CSS中实现按钮居中显示图片的方法：

.button {
  background-image: url("img.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
} 

首先，我们为按钮添加了一个背景图像。通过设置 background-position: center，我们使图像位于按钮的正中央。为了避免图像在按钮上重复显示，我们设置 background-repeat: no-repeat。同样，background-size: contain确保我们的图像适合按钮的大小。

接下来，我们使用Flexbox布局技术通过设置 display: flex 属性来使图像在按钮中居中显示。使用 justify-content: center 属性可以使容器在水平方向上居中对齐。另一方面，使用 align-items: center 属性可以将项目在垂直方向上居中对齐。

最后，我们还需要为按钮设置宽度和高度以适应我们的布局。在这个例子中，我们设置按钮的宽度和高度分别为200像素和50像素。

这就是如何使用CSS使图像在按钮中居中显示的全部内容。通过使用这种方法，我们可以轻松地为我们的按钮图像添加一个专业而美观的外观，增加我们网站的吸引力。