Comment puis-je centrer parfaitement un élément pivoté, en particulier lors du redimensionnement de l'écran ?

L'élément centré échappe au centre, en particulier lors du redimensionnement de l'écran

L'alignement horizontal d'un pointeur triangulaire continue d'être insaisissable, en particulier lors des ajustements de la taille de la fenêtre.

Le coupable réside dans l'utilisation erronée de gauche : 48 % pour centrer le triangle. Bien que cela centre apparemment l'élément, cela place en fait le bord gauche du pointeur près du centre de son conteneur.

Pour un véritable centrage, l'approche correcte est à gauche : 50 %, ce qui aligne le centre du pointeur avec celui de le conteneur. Cependant, cela introduit un nouveau problème : l'élément est décalé vers la droite lors de l'utilisation de gauche : 50 %.

La solution est d'utiliser la propriété transform avec translation(-50%,0). Cette règle demande au triangle de se décaler vers la gauche de 50 % de sa largeur, le centrant ainsi sur la même ligne qu'avant.

Dans ce cas spécifique, cependant, en appliquant à la fois transform: rotate(45deg) et transform: translate (-50%,0) présente un défi. La cascade remplace la deuxième règle de transformation, la rendant inefficace.

Pour résoudre ce problème, le chaînage des fonctions de transformation est nécessaire. Le code corrigé est :

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

Ce code modifié centre désormais correctement le pointeur triangulaire et maintient sa position même lorsque l'écran est redimensionné.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!