[RÉGLÉ] Centrer une image dans une cellule de tableau

[Alain_56]

Bonjour,
Dans un fichier HTML, je veux center verticalement et horizontalement une image.

.identite-drapeau {
border: 0px #aaa solid;
text-align: center;
display: table-cell;
vertical-align: middle;
}

Le css ci-dessous ne centre pas l'image, où est mon erreur ?

[Colnem30]

Bonjour

Tu ne nous dit pas si .identite-drapeau est la classe de l'image ou celle de son conteneur.

Pour le centrage horizontal, appliquer à l'image la règle CSS: {display:block; margin:auto;}.
Pour le centrage vertical, par rapport à quoi? à l'écran? à un conteneur?

[Alain_56]

Bonjour
Tu ne nous dit pas si .identite-drapeau est la classe de l'image ou celle de son conteneur.
Pour le centrage horizontal, appliquer à l'image la règle CSS: {display:block; margin:auto;}.
Pour le centrage vertical, par rapport à quoi? à l'écran? à un conteneur?

Bonjour Colnem30,
.identite-drapeau est la classe de l'image
Je souhaite un centrage vertical par rapport à un conteneur "drapeau".
Alain

[woluweb]

Deux lignes de css efficaces : voir le tip 1 de Una sur cette page pour centrer avec CSS Grid

https://web.dev/one-line-layouts/

[Colnem30]

SI ton conteneur n'englobe que l'image, tu le mets en {overflow:hidden} de façon à ce qu'il englobe l'image.
Ensuite, tu peux appliquer un padding si tu veux un espace entre le conteneur et l'image.

Ce qui donne:
div.drapeau {overflow:hidden; padding:20px auto;} pour le cadrage vertical.
img.identite-drapeau {display:block; margin:auto;} pour le cadrage horizontal.