我正在尝试更改为在我的按钮中使用精灵而不是图标。
旧 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 中的精灵与按钮中“创建”文本的底部对齐。当我使用 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;
}