Vielen Dank für die erneute Rückmeldung. Jedoch löst dies leider mein Problem bislang nur bedingt, da es nur den Text ein bisschen in die Mitte verschiebt, der Regler aber an gleicher Stelle verbleibt. Ich habe folgendes probieert:
div.S2slider {
display: flex;
flex-direction: column; /* Ordnet die Elemente vertikal an */
align-items: center; /* Zentriert die Elemente horizontal */
justify-content: center; /* Zentriert die Elemente vertikal, falls der Container eine große Höhe hat */
width: 100%; /* Optional: sorgt dafür, dass der Container volle Breite einnimmt */
}
div.S2slider div.s2label {
text-align: center; /* Zentriert die Beschriftung */
margin-bottom: 10px; /* Verringert den Abstand zwischen Label und Schieberegler */
}
div.S2slider input[type="range"] {
width: 100%; /* Der Schieberegler nimmt die volle Breite des Containers ein */
max-width: 400px; /* Optional: stellt sicher, dass der Schieberegler nicht zu breit wird */
margin: 0 auto; /* Zentriert den Schieberegler horizontal im Container */
display: block; /* Macht den Schieberegler zu einem Block-Element */
}
...hierdurch wird die visuelle Verankerung verschoben aber nicht der Regler selbst.
Außerdem werden ja nun weiterhin alle Texte mittig positioniert. Ich würde dies aber gerne auf bestimmte Items (die vom Typ Schieberegler) begrenzen. Über Ihre Hilfe zu diesen zwei Problemen würde ich mich freuen