1

私は自分の作品のイメージを持っています、

ここに画像の説明を入力してください

左側のアイコンを同じ位置に配置したいのですが、中央を垂直に揃えます...アイコンのサイズが異なります...これはcssを介して可能ですか.. ??

これが私のコードです、

.iconSmall {
    background-attachment: scroll;
    background-clip: padding-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 2% 50%;
    background-repeat: no-repeat;
}

<a href="index.html" style="background-image:url(images/001_56.png);" class="iconSmall">Beauty and Spas</a>
4

2 に答える 2

1

すべてのアイコンが同じサイズでない限り、そのコードは希望どおりに整列しません。

しかし、あなたができることは

.iconSmall {
background-attachment: scroll;
background-clip: padding-box;
background-color: transparent;
background-origin: padding-box;
background-position: 2% 50%;
background-repeat: no-repeat;
}

次に、各リストアイテムを別のクラスにします。

<li class="iconSmall foodResturant">....</li>
.foodResturant {
background-position:1px 2px;
}
于 2012-06-08T07:42:13.950 に答える
-1

はい、問題なく動作します。位置を指定して繰り返すだけです。

.iconSmall {
    background-position: 5px center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

パーセントではなくピクセルを使用することをお勧めします。center必要に応じて、代わりにキーワードを使用できます50%。

ヒント：要素に複数のクラスを使用して、背景画像をスタイルシートに配置できるようにすることができます。

.iconSmall.beauty {
    background-image: url(images/001_56.png);
}

<a href="index.html" class="iconSmall beauty">Beauty and Spas</a>

デモ： http： //jsfiddle.net/Guffa/UrXA2/

于 2012-06-08T07:42:59.493 に答える