我使用以下代码创建了一个按钮:
<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水平居中但不垂直居中。我该如何解决这个问题?
答案 0 :(得分:1)
您可以使用flexbox
垂直对齐它。
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
答案 1 :(得分:0)
向.btn
和vertical-align
提供一些填充到.btnIcon
似乎是这样做的。
.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;