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

问题描述：

<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; 
}

所以我的图标是水平而非垂直居中。我怎样才能解决这个问题？

最简单的方法是将一对夫妇填充的像素添加到'img'，但只会工作，如果按钮是一个固定高度 –

另外请注意，我删除任何引用JS/jQuery，因为它与您所拥有的CSS问题无关 –

只需添加一个边距：auto;风格到img –

答

您可以使用flexbox垂直对齐。

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

答

给一些填充到.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; 
 
}

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

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

相关推荐