jquery - Center child a element within different-width same-class parents -

i'm enter jquery world in more specific way, i've written function center absolute positioned anchor elements within relative positioned divs, setting css left property according child & parents outerwidth.

here is:

$.fn.morecenter = function() {      var sblockwidth = $(this).outerwidth();     var morewidth = $(this).children('a').outerwidth();     var moreleft = (sblockwidth - morewidth)/2;      $(this).children('a').css('left', moreleft + 'px');  }; 

then target parent div class:

$(document).ready(function() {     $('.single-block').morecenter(); }); 

the point .single-block structure repeated in many parts of page, , each .single-block may of different widths. reason why function generalizes parent div using (this).

however, function seems apply same left value each ".single-block a" element, calculated on basis of first .single-block finds, without re-calculating each element.

what's wrong code?

sonnyprince transform/translate won't work in older browsers.

thanks paulie_d, able center child anchor elements via css in way.

parent { position: relative;          width: can expressed in %;           whateverprop: whoteverset; }  child { position: absolute;          left: 0;          right: 0;          margin: 0 auto; } 

anyway, managed correct jquery function above using .each().

    $.fn.morecenter = function() {        $(this).each(function() {          var sblockwidth = $(this).outerwidth();          var morewidth = $(this).children('a').outerwidth();          var moreleft = (sblockwidth - morewidth)/2;           $(this).children('a').css('left', moreleft + 'px');        });     }; 

question solved me, guys :)