Positioneren met jQuery outerWidth

[Ronnyrr]

He Tweakers,

Met HTML/CSS heb ik een titel voor producten welke ik horizontaal wil centreren. Omdat deze titels over een <hr> lijn heen moet komen, bevat de titels een position: absolute;.
Via CSS krijgen de titels left:50%; en door met jQuery marginLeft -(titel.outerWidth()/2) toe te voegen zouden de titels zo netjes in het midden geplaatst moeten worden.

De volgende jQuery code wordt uitgevoerd on $(document).ready():

JavaScript:

    $('.content').find('.title').each( function() {
       var h = $(this).find('h1');
       h.css('marginLeft', -(h.outerWidth()/2));
    });

Als ik de breedte van het <h1> element log, is de uitkomst 232px (in het geval waar het fout gaat), terwijl als ik het element inspecteer de breedte 242px is. De outerWidth() van het element is dus niet correct.

Wellicht nog nuttige informatie: Foute outerWidth() waardes komen alleen voor als de volgende PHP code uitgevoerd wordt op de titel:

PHP:

    echo (strlen($title) > 20 ? substr($title, 0, 20) . ".." : $title);

Dezelfde jQuery code als bovenstaand wordt ook uitgevoerd on $(window).resize(). Ook dan log ik het resultaat van de breedte, welke dan wel correct (242px) is. Het element wordt dus pas bij het veranderen van de browser grootte goed gepositioneerd.

Aan de hand daarvan heb ik geprobeerd een soort hack te uit te voeren door on $(document).ready() het volgende uit te voeren:

JavaScript:

    $(window).resize();

Helaas werkte dit niet. Na het lezen van deze Stack Overflow vraag heb ik ook geprobeerd on $(window).load(), zowel de resize trigger als de volledige jQuery code uit te voeren. Beide werkte helaas niet.

Om het te verduidelijken heb ik een online voorbeeld. Heb het probleem geprobeerd na te maken met JSFiddle, maar dit kreeg ik niet voor elkaar.
Het probleem doet zich voor bij de titel van het eerste product (waar dus de PHP code op uitgevoerd word).

Bij voorbaat dank voor de hulp!

[Dark_f]

Volgens mij kan je dit oplossen puur met css, zonder jquery. Bekijk eens het volgende:

http://jsfiddle.net/Puigcerber/vLwDf/1/

[R4gnax]

Dark_f schreef op maandag 09 juni 2014 @ 16:17:
Volgens mij kan je dit oplossen puur met css, zonder jquery. Bekijk eens het volgende:

http://jsfiddle.net/Puigcerber/vLwDf/1/

Ooh! Da's een slimme truc om op die manier met die negatieve marges te spelen. Die moet ik onthouden.

[Ronnyrr]

Die is inderdaad heel netjes, solved my problem! Bedankt!