1

リンクの背景画像として機能する 200px x 100px の画像があります。ホバリングすると、背景画像が変化します。

ここに画像の説明を入力

ここでフィドル: http://jsfiddle.net/EnsFK/

画像からわかるように、テキストは画像と一致せず、下部に表示されます。テキストを中央に揃える方法はありますか (小さなドットに揃えますか?)、縦揃えと行の高さを試しましたが、役に立ちませんでした。

.current-location {
    line-height: 24px;
    background-size: 48px 24px;
    height: 24px;
    width: 24px;
    text-decoration: none;
    position: relative;
    line-height: 24px;
    vertical-align: middle;
}

.current-location span {
    background: url(images/mobile/current-location.gif) left top no-repeat;
    display: inline-block;
    background-position: 0px 0px;
    background-size: 48px 24px;
    height: 24px;
    width: 24px;
    margin-right: 10px;
}

.current-location:hover span {
    display: inline-block;
    background-position: -24px 0px;
    background-size: 48px 24px;
    height: 24px;
    width: 24px;
}
4

5 に答える 5

4

マークアップで空のスパンを使用する代わりに、 pseudo elements.

このようなもの：

.current-location:before {
   content: '';
   /* image here */
   margin-right: x px; /* however much you need */
   vertical-align: middle;
}

フィドル

マークアップ:

<a href="#" class="current-location">Use this location</a>

CSS

.current-location {
       line-height: 24px;
       background-size: 48px 24px;
       height: 24px;
       width: 24px;
       text-decoration: none;
       position: relative;
     }
     .current-location:before {
         content: '';
          background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
          display: inline-block;
          background-position: 0px 0px;
          background-size: 48px 24px;
          height: 24px;
          width: 24px;
          margin-right: 10px;
          vertical-align: middle;
      }
     .current-location:hover:before {
          background-position: -24px 0px;         
      }
于 2013-08-25T12:15:04.947 に答える
0

あなたのリンクは適切に配置されています代わりにあなたの画像を見てください

background: url(images/mobile/current-location.gif) left top no-repeat;

中央揃えにしたい場合は、次のことを検討する必要があります...

background: url(images/mobile/current-location.gif) center center no-repeat;

また、このメソッドが機能するように、画像の実際の幅と高さを指定してください。

display: inline-block;

使用する必要がある ie6 に問題があります。

display:inline-block;
*zoom: 1;
*display: inline;

垂直方向の配置から離れてください。

于 2013-08-25T12:11:13.077 に答える
0

画像がなく、余分なマークアップがないバージョンはどうですか? http://jsfiddle.net/6aaZX/

この HTML の場合:

<a href="#">Use this location</a>

この CSS:

a {
    display: inline-block;
    color: #333;
    text-decoration: none;
    font-family: sans-serif;
    padding-left: 4em;
    line-height: 2;
}

a:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
     border-radius: 50%;
    background: #81B995;
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border: 0.4em solid #B7E2C8;
    margin-right: 1em;
    vertical-align: -0.3em;
}

これには border-radius のサポートが必要ですが、それだけです。画像を使用する必要がある場合は、Danield の提案に従って、:before 疑似要素に適用できます。

于 2013-08-25T14:16:21.813 に答える