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;

等...

于 2012-07-04T13:51:22.220 に答える
0

画像を適切な場所に配置できると思います。

問題は、「作成」テキストを div の中央に配置することです。

アイコン クラスに次のスタイルを追加します。

.icon    
{         
     vertical-align: middle;    
}

これにより、テキストが div の中央に表示されます。

于 2012-07-04T14:10:00.060 に答える