Centrer une image dans une cellule de tableau

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    Bonjour,
    Dans un fichier HTML, je veux center verticalement et horizontalement une image.
    Code HTML:
    .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 ?
    Dernière édition par Alain_56 à 26/08/2022, 09h47

  • #2
    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?

    Commentaire


    • #3
      Envoyé par Colnem30 Voir le message
      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

      Commentaire


      • #4
        Deux lignes de css efficaces : voir le tip 1 de Una sur cette page pour centrer avec CSS Grid
        This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.
        Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

        Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          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.
          Alain_56 aime ceci.

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X