按鈕圖標居中水平，但不是垂直

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

所以我的圖標是水平而非垂直居中。我怎樣才能解決這個問題？

Answer 1

您可以使用flexbox垂直對齊。

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

Answer 2

給一些填充到.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>