如何将图像居中放置在按钮内

Question

我希望该.svg图像位于我的自定义样式按钮内居中。

.btn-close {
  position: relative;
  height: 30px;
  border: 1px solid #e4e4e4;
  width: 30px;
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  border-radius: 100%;
  background-color: white;
}

我的.jsx代码：

<button className='btn-close' onClick={onClose}><img src={close}></img></button>

Answer 1

尝试将margin属性设置为auto

[编辑]：我刚刚看到按钮的显示设置为可弯曲，因此您也可以尝试使用 justify-content：center

Answer 2

尝试一下，只需对您的代码进行一些编辑。您的代码可以正常工作！..为了方便起见，我只是在不使用React声明的情况下更新代码段。

.btn{
  position: relative;
  border: 1px solid black;
  align-items: center;
  margin-top: 1.5rem;
  border-radius: 100%;
  padding: 20px;
  background-color: white;
}
img{
  height: 50px;
}

<button class="btn">
  <img src="https://cdn.onlinewebfonts.com/svg/img_206719.png" alt="X"/>
</button>

希望对您有帮助！.. 快乐编码！

Answer 3

您的代码看起来还不错，您只是想念justify-content: center，而您的图片将位于您想要的中间。

在代码中：

.btn-close {
  position: relative;
  height: 30px;
  border: 1px solid #e4e4e4;
  width: 30px;
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  border-radius: 100%;
  background-color: white;
  justify-content: center;
}