html - 如何用 sprite 替换按钮中的 img 并使其对齐？

Question

我正在尝试更改为在我的按钮中使用 Sprite 而不是图标。

旧的 HTML:

<button id="refreshLink" type="button">
<img width="16" height="16" src="/Content/images/icons/fugue/arrow-circle.png">
Refresh</button>

这是我的新 HTML:

<button id="createLink" type="button">
<div class="icon sprite-document-text"></div>Create</button>

但是我有一个问题:新 HTML 中的 Sprite 与按钮中的“创建”文本。当我使用 img 时，图像显示为它上面和下面的空间相等，这就是我想要的。有什么办法可以让我在第一个代码中的 div 没有与文本底部对齐？

Using img 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx     
x                                x 
x                                x    
x xxxxxx                         x     
x xxxxxx   xxxxxxxxxxxxxxxxxx    x     
x xxxxxx   xxxxxxxxxxxxxxxxxx    x
x xxxxxx   xxxxxxxxxxxxxxxxxx    x
x xxxxxx   xxxxxxxxxxxxxxxxxx    x
x xxxxxx                         x
x                                x
x                                x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Using DIV
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx     
x                                x 
x xxxxxx                         x   
x xxxxxx                         x     
x xxxxxx   xxxxxxxxxxxxxxxxxx    x     
x xxxxxx   xxxxxxxxxxxxxxxxxx    x
x xxxxxx   xxxxxxxxxxxxxxxxxx    x
x xxxxxx   xxxxxxxxxxxxxxxxxx    x
x                                x
x                                x
x                                x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

我的 CSS:

.sprite-document-text { background-position: 0 -990px; }
.icon {
    background-color: transparent;
    background-image: url("/Images/fugue/sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    width: 16px;
}
.button{
    display: inline-block;
    font-size: 1.167em;
    line-height: 1.429em;
    padding: 0.286em 1em 0.357em;
}
button img {
    margin-bottom: -3px;
}

Answer 1

尝试在 div.icon 上将 vertical-align 设置为 middle/text-top。

在这里，我稍微简化了 fiddle ，并使用了在线图片 -> http://jsfiddle.net/joplomacedo/7pyPw/