Comment puis-je centrer une image verticalement et horizontalement dans une division ?

Centrer une image verticalement et horizontalement dans un conteneur Div

Lorsque vous souhaitez positionner avec précision une image dans un div plus grand, obtenir à la fois vertical et l’alignement horizontal peut présenter un défi. Voici comment procéder :

Alignement horizontal :

Pour centrer une image horizontalement dans un div, utilisez la propriété text-align: center de CSS appliquée au div parent. Cela centre tout le contenu dans le div, y compris l'image.

Alignement vertical :

Réaliser l'alignement vertical nécessite une approche différente. Une technique efficace consiste à utiliser le positionnement absolu :

• Définissez la position de l'image sur absolue, indiquant qu'elle est positionnée de manière absolue par rapport à son ancêtre le plus proche (le div parent dans ce cas).
• Appliquer la marge : auto ; pour activer la marge automatique, qui centrera l'image dans l'espace disponible.
• Régler le haut, la gauche, la droite et le bas sur 0 garantit que l'image couvre toute la hauteur et la largeur du div parent.

Exemple CSS :

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

En combinant l'alignement horizontal via text-align : centre et vertical alignement en utilisant le positionnement absolu avec des marges, vous pouvez efficacement centrer une image dans un div englobant plus grand.

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!