Warum verschiebt sich der Zeiger meines horizontal zentrierten Dreiecks während der Größenänderung?

Probleme bei der horizontalen Zentrierung des Dreieckszeigers bei der Größenänderung des Bildschirms

Problembeschreibung

Der Benutzer beabsichtigt, ein Dreieck horizontal zu zentrieren Zeiger innerhalb eines Containerelements. Obwohl dies bei bestimmten Fenstergrößen erfolgreich ist, verschiebt sich der Zeiger aus der Ausrichtung, wenn die Fenstergröße geändert wird.

Lösung

Verstehen des Problems:

Der erste Versuch, den Zeiger mit links zu zentrieren: 48 % positioniert den Zeiger basierend auf seinem linken Rand. Dieser Ansatz berücksichtigt nicht die Breite des Elements, was zu einer Fehlausrichtung führt, wenn sich die Fenstergröße ändert.

Transformation verwenden, um eine Zentrierung zu erreichen:

Um das Dreieck richtig zu zentrieren, ist es Es wird empfohlen, die Transformationseigenschaft zu verwenden:

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

Diese Regel verschiebt die Position des Dreiecks effektiv um 50 % seiner Breite Zentrieren Sie es innerhalb des Containers.

Transformation mit Rotation kombinieren:

In diesem speziellen Szenario wird auf das Dreieckselement auch eine Transformation angewendet: rotation(45deg). CSS-Kaskadenregeln überschreiben jedoch die erste Transformation mit der zweiten und verhindern so die horizontale Zentrierung.

Um dieses Problem zu beheben, verketten Sie die Transformationsfunktionen:

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

Mehrere Transformationsfunktionen können zusammen verwendet werden. Bitte bewerben Sie sich in der Reihenfolge, in der sie aufgeführt sind. In diesem Fall wird zuerst die Übersetzung angewendet, gefolgt von der Drehung.

Vollständiger Codeausschnitt:

body {
    background: #333333;
}

.container {
    width: 98%;
    height: 80px;
    line-height: 80px;
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-top: 50px;
}

.container-decor {
    border: 4px solid #C2E1F5;
    color: #fff;
    font-family: times;
    font-size: 1.1em;
    background: #88B7D5;
    text-align: justify;
}

.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;
}

<div class="container container-decor">great distance</div>

Das obige ist der detaillierte Inhalt vonWarum verschiebt sich der Zeiger meines horizontal zentrierten Dreiecks während der Größenänderung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!