Margin mit der gleichen Klasse für jedes Element der Berechnung

Question

I verschiedene DIVs mit unterschiedlichen Breiten entlang unterschiedlichen X-Achsen positionieren möchte, (50%, 30% ...) Also habe ich versucht, diese Lösung:

$(document).ready(function() { 
$('.axis').each(function() { 
var $this = $(this); 
$this.css('margin-left', -(startWidth/2) + 'px'); 
}); 
}); 

CSS :

#item_1 { 
position: absolute; 
top: 100px; 
left: 50%; 
width: 500px; 
height: 100px; 
} 

Irgendwie es funktioniert noch nicht ...

<div class="axis" id="item_1"></div> 
<div class="axis" id="item_2"></div> 
<div class="axis" id="item_3"></div> 

Hier ist ein J Fiddle, die das Problem zeigt, würde Ich mag die Punkte auf einer X-Achse zentriert haben ...

https://jsfiddle.net/gtpadmy2/

Answer 1

Keine Notwendigkeit für JS. Fügen Sie einfach eine Übersetzung, die die Hälfte Marge auf Ihre CSS behebt:

.axis { 
    // other properties 
    left: 50%; 
    transform: translateX(-50%); 
} 

Updated fiddle.