如何使按钮中的图像居中

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

尝试将边距属性设置为自动

编辑:我刚刚看到按钮上的显示设置为flex，因此您也可以尝试使用-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;
}