CSS: Wie kann ich die Position eines Elements mit der Mitte als Ursprung aus der Javascript-Variable setzen?

Question

Ich habe ein Bild bekam eine Skala Markierung, wo die Position in HTML-Set ist der Marker

<image class="red-marker" xlink:href="./assets/images/marker.png" 
[attr.x]=percentage width="12"height="40" y="0" ></image> 

jedoch zu sein, möchte ich die Mitte der Markierung an dieser Position erscheinen. Jetzt stimmt seine linke Seite damit überein. Siehe Bild:

The marker's position when 'percentage' is 100%: Gibt es eine Möglichkeit in HTML, CSS oder Javascript, ich könnte dieses Problem beheben, indem zum Beispiel:

• Einstellung Bild Herkunft horizontal Mitte

• CSS des Calc verwenden() auf X-Position zusammen mit einer unbekannten Javascript-Variablen
• Position innerhalb von Javascript anwenden, beziehen sich auf Variable dort.

?

Answer 1

(Bearbeitet) Sie können transform: translateX(-50%) dem CSS des Bildes hinzufügen. Dies bewegt es um die Hälfte seiner eigenen Breite nach links.

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #ccc; 
 
    margin-left: 200px; 
 
} 
 

 
img { 
 
    transform: translateX(-50%); 
 
}

<div><img src="http://placehold.it/100x50/fa0"></div>