html - 使用CSS将IMG和文本对齐

我正在尝试使用跨度来制作一个带有图像的按钮。
可以执行以下操作，但是问题是文本在垂直方向上居中对齐，但是保存按钮img没有。我需要所有内容在中间垂直对齐。我的代码有什么问题？

.ButtonSPAN{
display:inline-block;
color: white;
background-color:#00537B;
border: 1px solid #1E90FF;
height: 25px;

padding:3px;
vertical-align:middle;
font-weight: bold;
}
.ButtonSPAN:hover{
color: #F0E68C;
cursor: hand; cursor: pointer;
}

<span class="ButtonSPAN"><img src="/common/images/save.png" onclick="Save()">&nbsp;Save</span>

最佳答案

[更新]将“保存”包装在span中，然后添加到CSS中

.ButtonSPAN{
    line-height:25px;
}

.ButtonSPAN *{
    vertical-align:middle; //Align everything nested in .ButtonSPAN to the middle
}

演示here