jQuery - Set background position in the middle of each element

Question

How can I make all the elements from this list have the background in center no matter of the width of the element.

<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>

My css is like this:

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;}

I tried like this, but no luck:

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

Thank you!

I use css sprites. with this is looking strange with center. I need to change only the vertical value with the exact value to fit for the with of element — Adrian Florescu, May 17 '11 at 23:32
Florescu, could you perhaps link the sprite file or describe it? — Amit G, May 17 '11 at 23:34
I use the top man with the legs strange putted :) for background. — Adrian Florescu, May 17 '11 at 23:37

score 1 · Accepted Answer · edited May 23 '17 at 12:04

Well Florescu,

I finally figured it out.

The problem is that links don't have any width, firebug 'em and you'll see that their width is computed as 'auto' unless you promote them to block level elements with explicit widths. So the solution? We find the width of the text contained in 'em.

Here's the solution, http://jsfiddle.net/aPuhP/1/; and the explanation,

We insert a dummy span tag to be able to calculate the element's width,

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

..we then calculate the width and run calculations required to get the desired width (the -20 is to compensate for the sprite's distance from the left edge of the image),

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

..and finally, we get rid of the dummy span tag,

   $(this).html(source);

Hope this helps.

PS: Kudos to Calculating text width.

score 0 · Answer 2 · answered May 17 '11 at 23:43

0

you will have to take in consideration the 40 pixel wide padding given to the elements.

Horizontal value must be first, vertical value must be second in the css statement. If you use values smaller or greater than zero, you should add the measurement unit (px, pc, pt, em)

answered May 17 '11 at 23:43

beerwin

9,813
6
42
57

Yes, this is true, but I need to know how to do that! – Adrian Florescu May 17 '11 at 23:52

jQuery - Set background position in the middle of each element

2 Answers2