Wie kann ich ein gedrehtes Element perfekt zentrieren, insbesondere bei der Größenänderung des Bildschirms?

Zentriertes Element verschwindet aus der Mitte, insbesondere bei der Größenänderung des Bildschirms

Die horizontale Ausrichtung eines Dreieckszeigers ist weiterhin schwer zu erreichen, insbesondere bei Anpassungen der Fenstergröße.

Der Übeltäter liegt darin, dass links: 48 % fälschlicherweise verwendet wurde, um das Dreieck zu zentrieren. Während dadurch das Element scheinbar zentriert wird, wird der linke Rand des Zeigers tatsächlich nahe der Mitte seines Containers platziert.

Für eine echte Zentrierung bleibt der richtige Ansatz übrig: 50 %, wodurch die Mitte des Zeigers an der von ausgerichtet wird Der Behälter. Dies führt jedoch zu einem neuen Problem: Das Element wird nach rechts verschoben, wenn links verwendet wird: 50 %.

Die Lösung besteht darin, die Transformationseigenschaft mit Translate(-50 %,0) zu verwenden. Diese Regel weist das Dreieck an, sich um 50 % seiner Breite nach links zu verschieben, wodurch es effektiv auf derselben Linie wie zuvor zentriert wird.

In diesem speziellen Fall werden jedoch sowohl „transform: rotation(45deg)“ als auch „transform: translator“ angewendet (-50%,0) stellt eine Herausforderung dar. Die Kaskade setzt die zweite Transformationsregel außer Kraft und macht sie unwirksam.

Um dieses Problem zu beheben, ist die Verkettung von Transformationsfunktionen erforderlich. Der korrigierte Code lautet:

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

Dieser geänderte Code zentriert den Dreieckszeiger jetzt korrekt und behält seine Position bei, auch wenn die Bildschirmgröße geändert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich ein gedrehtes Element perfekt zentrieren, insbesondere bei der Größenänderung des Bildschirms?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!