jQuery - 在每個元素的中間設置背景位置

-1

如何使該列表中的所有元素都具有背景，而不管元素的寬度如何。jQuery - 在每個元素的中間設置背景位置

<ul id="menu"> 
<li><a href="#">Name</a></li> 
<li><a href="#">Name</a></li> 
<li><a href="#">Name</a></li> 
<li><a href="#">Name</a></li> 
<li><a href="#">Name</a></li> 
</ul>

我的CSS是這樣的：

ul#menu li a { background:url(../images/header-img.png) 0 0 no-repeat; padding:40px 0 0 0; display:block; font-size:12px; color:#000;}

我想這樣的，但沒有運氣：

$("ul#menu li a").each(function(i){ 
    var value = $(this).width()/2; 
    $(this).css('backgroundPosition', value + ' 0'); 
    });

謝謝！

來源

2011-05-17 Adrian Florescu

'ul＃menu li a {background position：center top; } ??? – 2011-05-17 23:27:40

我使用CSS精靈。這與中心看起來很奇怪。我只需要改變垂直值的精確值，以適應元素 – 2011-05-17 23:32:40

Florescu，你可能鏈接精靈文件或描述它？ – 2011-05-17 23:34:42

好弗洛雷斯庫，

我終於想通了。

問題是，鏈接沒有任何寬度，螢火蟲'em，你會發現他們的寬度計算爲'自動'，除非你提倡他們阻止具有明確寬度的級別元素。那麼解決方案？我們找到了文本中包含的文本的寬度。

下面是解決方案，http://jsfiddle.net/aPuhP/1/;和解釋，

我們插入一個虛擬的跨度標籤能夠計算元素的寬度，

var source = $(this).html(); 
    var sensor = "<span>" + source + "</span>"; 
    $(this).html(sensor);

然後......我們計算寬度和運行，以獲得所需寬度所需的計算（-20是爲了補償從圖像）的左邊緣的精靈的距離，

var width = $(this).find('span:first').outerWidth(); 
    var v = width/2; 
    $(this).css('backgroundPosition', v - 20 + 'px 0');

..和最後，我們擺脫了僞跨度標籤，

$(this).html(source);

希望這會有所幫助。

PS：榮譽給Calculating text width。

來源

2011-05-18 00:20:53

這很好！謝謝！ – 2011-05-18 00:44:24

您將不得不考慮給予元素的40像素寬填充。

水平值必須是第一個，垂直值必須是第二個在CSS語句中。如果您使用的值小於零或更大，你應該添加測量單元（PX，PC，PT，EM）

來源

2011-05-17 23:43:14 beerwin

是的，這是真的，但我需要知道如何做到這一點！ – 2011-05-17 23:52:44

jQuery - 在每個元素的中間設置背景位置

回答

相關問題