通过 CSS 对齐按钮的图像位置答案

【问题标题】：Align image position of button by CSS通过 CSS 对齐按钮的图像位置
【发布时间】：2020-05-31 07:10:37
【问题描述】：

我有一个带有背景图像和大于图像宽度的文本的按钮。怎么把图片放在文字中间

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background: url('http://127.0.0.1/pics/item/c1763.png')  no-repeat;
  background-size: 100% 100%;
  border: none;
  color: black;
  font-size: 16px;
  width:60px;
  height:60px;
  padding-top:60px;
  white-space: nowrap;
  background-position: center center;
  display: flex;
}
</style>
</head>
<body>

<button class="button">Button text test</button>

</body>
</html>

Button image

【问题讨论】：

尝试背景尺寸：包含
感谢您的回复，但对图像对齐没有任何影响

标签： css image button alignment

【解决方案1】：

希望对您有所帮助。

.button {
  background: url('https://i.stack.imgur.com/GxHaN.jpg') no-repeat;
  background-size: 100% 100%;
  border: none;
  color: black;
  font-size: 16px;
  width: 60px;
  height: 60px;
  white-space: nowrap;
  background-position: center center;
  display: flex;
}

&lt;button class="button"&gt;Button text test&lt;/button&gt;

【讨论】：

感谢您的回复，但是按钮左侧仍然出现图片
更改按钮宽度。现在有宽度：60px;
感谢您的指导这是最终的解决方案将按钮的宽度更改为文字宽度，并将图片宽度设置为实际大小

【解决方案2】：

最终的解决方案是确定图片的实际宽度并为文本指定按钮的宽度

.button2 {
  background-color: transparent;
  background-image: url('http://127.0.0.1:25005/pics/item/c1763.png');
  background-size: 60px  60px;
  background-repeat: no-repeat;
  border: none;
  font-size: 16px;
  height: 60px;
  width: 150px;
  text-align: center;
  padding-top: 60px;
  white-space:nowrap;
  background-position: center top;
}

【讨论】：