使背景圖片的位置垂直居中向左

enter image description here

我想左側的圖標應該是在同一個位置，但垂直對齊中心... 圖標是不同的尺寸... 這可能通過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>

來源

2012-06-08 SaurabhLP

之前，除非所有的圖標大小相同的代碼不會如你所願對齊即可。

但你可以做的是

.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-08 07:42:13 themightysapien

的圖標大小各不相同像一些圖標有更大的寬度較小的高度和一些有較小的寬度較大的高度，1或更多的圖標會放大...所以我不能使用固定的寬度或背景大小等... – SaurabhLP

-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-08 07:42:59 Guffa

這個答案可能對我沒有用因爲我想要圖標垂直居中對齊到左邊... – SaurabhLP

@SaurabhLP：圖標* *垂直居中，並放置5像素ls從左邊。你可以自然地改變像素的數量到任何你想要的。如果你想讓它們在左邊緣刷新，你可以使用'left'關鍵字。 – Guffa

爲此，我必須安排所有圖標手動與不同的大小左邊，我不想...圖標和文字從DB動態我怎麼能爲每個圖標設置不同的左尺寸.. – SaurabhLP

使背景圖片的位置垂直居中向左

回答

相關問題