Wie kann man ein dreieckiges Element während der Fenstergrößenänderung perfekt horizontal zentrieren?

Aufrechterhaltung der horizontalen Zentrierung eines Elements während der Größenänderung des Fensters

Problem:
Horizontale Zentrierung eines Elements durch CSS kann schwierig sein, wenn die Fenstergröße geändert wird, insbesondere bei Elementen mit einer Dreiecksform Form.

Lösung des Problems:
Um sicherzustellen, dass ein Element unabhängig von der Fenstergröße horizontal zentriert bleibt, ist es wichtig, die richtige CSS-Eigenschaft zu verwenden und zu verstehen, wie die Elementpositionierung funktioniert. Während die Einstellung „Links: 50 %“ intuitiv erscheinen mag, positioniert sie das Element tatsächlich anhand seines linken Randes und nicht anhand der Mitte.

Lösung: Transformieren und übersetzen
Um eine echte horizontale Zentrierung zu erreichen , ist es üblich, die Eigenschaft transform:translate() zu verwenden. Diese Eigenschaft weist das Element an, sich um einen bestimmten Prozentsatz seiner Breite nach hinten zu verschieben und es so effektiv auf der gewünschten Achse zu zentrieren.

Transformation auf vorhandenen Code anwenden
Im bereitgestellten Code Das Dreieckselement ist zunächst mit links: 48 % positioniert, wodurch es nahe der Mitte, aber falsch platziert wird. Um dies anzupassen, können wir die Regel transform: translator(-50%, 0) verwenden, um das Element um 50 % seiner Breite nach hinten zu verschieben und so sicherzustellen, dass es perfekt zentriert ist.

Transformationen verketten
Der bereitgestellte Code enthält jedoch auch eine Eigenschaft „transform: rotation(45deg)“, die vor „transform: translator(-50 %, 0)“ angewendet wird. Dies führt dazu, dass die transform:translate()-Regel aufgrund der CSS-Kaskade ignoriert wird.

Um dies zu berücksichtigen, können wir beide Transformationen kombinieren, indem wir die Fähigkeit der transform-Eigenschaft nutzen, Funktionen zu verketten. Die endgültige CSS-Regel für das Dreieckselement 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;
}

Durch die Verkettung der Transformationsfunktionen in dieser Reihenfolge (zuerst translator(), gefolgt von rotation()) stellen wir sicher, dass das Element zuerst zurückverschoben wird um 50 % seiner Breite und dann um 45 Grad gedreht. Dadurch wird sichergestellt, dass das Dreieck auch dann horizontal zentriert bleibt, wenn die Fenstergröße geändert wird.

Das obige ist der detaillierte Inhalt vonWie kann man ein dreieckiges Element während der Fenstergrößenänderung perfekt horizontal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!