按钮图标水平居中但不垂直居中

Question

我使用以下代码创建了一个按钮：

<div>
  <button class="btn nodeContainerBtn">
    <img class="btnIcon" src="Icons/icon-delete.png" />
  </button>
</div>

.btn {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  background-color: #E45043;
  transition: 0.2s;
}

.btnIcon{
  cursor: pointer;
}

.nodeContainerBtn {
    margin-left: 5px;
}

所以我的Icon水平居中但不垂直居中。我该如何解决这个问题？

Answer 1

您可以使用flexbox垂直对齐它。

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 2

向.btn和vertical-align提供一些填充到.btnIcon似乎是这样做的。

＆＃13;

＆＃13;

.btn {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  background-color: #E45043;
  transition: 0.2s;
  padding: 4px;
}

.btnIcon{
  cursor: pointer;
  vertical-align:middle;
}

.nodeContainerBtn {
margin-left: 5px;
}

＆＃13;

<div>
  <button class="btn nodeContainerBtn">
<img class="btnIcon" src="Icons/icon-delete.png" />
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;