html - 在中间的图像上方添加文本

我想在中间的图片上添加一些文字。我使用这个代码：

<div style="background-image: url(../images/game-hearts-icon.png); height: 64px; width: 64px; text-align: center; vertical-align:middle;">text</div>

我想把这篇文章放在心里。但它只是出现在顶部居中。垂直对齐似乎不起作用。我做错什么了？
感谢任何帮助！

最佳答案

将line-height设置为等于div的高度：

<div style="background-image: url(../images/game-hearts-icon.png); height: 64px; width: 64px; text-align: center; line-height: 64px;">text</div>

更好的是，不要使用内联样式：
HTML格式

<div class="game-hearts-icon">text</div>

CSS

.game-hearts-icon {
    background: transparent url(../images/game-hearts-icon.png) scroll 0 0 no-repeat;
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
}