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

时间:2017-07-17 20:01:03

标签: html css

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

<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水平居中但不垂直居中。我该如何解决这个问题?

enter image description here

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

.btnvertical-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;