1

I'm about to enter jQuery world in a more specific way, so i've written a function to center absolute positioned anchor elements within relative positioned divs, by setting css left property according to the child & parents outerWidth.

Here it 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 I target the parent div by their class:

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

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

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

What's wrong with the code?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
frafor
  • 139
  • 1
  • 11
  • 3
    You know you can do this with CSS..right? - http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element?rq=1 – Paulie_D Jan 27 '16 at 10:05
  • 1
    Thanks Paulie_D, I didn't know that setting a { left: 0; right: 0 } would result in margin: 0 auto to work! – frafor Jan 27 '16 at 10:14

2 Answers2

1

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

Thanks to Paulie_D, I was able to center the child anchor elements via css in this way. 

parent { position: relative;
         width: can be expressed in %; 
         whateverprop: whoteverset; }

child { position: absolute; 
        left: 0; 
        right: 0; 
        margin: 0 auto; }

Anyway, I managed even to correct the jQuery function above by 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 to me, thanks guys :)

frafor
  • 139
  • 1
  • 11
0

a very simple solution just using CSS would be:

.single-block {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
Sonny Prince
  • 1,094
  • 7
  • 15