1

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

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

3 回答 3

2

尝试vertical-align在div.icon.

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

于 2012-07-04T13:51:33.617 回答
0

为什么不在你的 .icon 类中试试这个呢？

background-position:center center;

或者

background-position:center 5px;

ETC...

于 2012-07-04T13:51:22.220 回答
0

我认为您可以将图像放在适当的位置。

问题在于将“创建”文本放在 div 的中间。

在图标类中添加如下样式

.icon    
{         
     vertical-align: middle;    
}

这将使文本出现在 div 的中间。

于 2012-07-04T14:10:00.060 回答