Comment centrer une image avec css

Si vous voulez centrer une image sur votre page web, il est facile de le faire avec CSS. Voici les étapes simples.


Sommaire

  • Instructions
  • Choses que vous devez

    • Une image du centre
    • Une page web ou blog

    Instructions

    1. Si vous voulez centrer une image comme celle des cow-boys à cheval ci-dessus, d'abord comprendre ce que votre sélecteur CSS devrait être. Le sélecteur pour une image est img. Cependant, vous voudrez peut-être de ne pas utiliser ce sélecteur seul, parce que si vous le faites, chaque image sur votre page sera centré. Utilisez un sélecteur plus spécifique pour centrer une seule image ou un groupe d'images.

    2. Voici un scénario: vous voulez centrer images d'aperçu dans une barre latérale. Vous avez un div appelé #sidebar et une classe appelée .preview pour les images et les liens que vous créez dans la barre latérale. Votre sélection pourrait être #sidebar .preview img. Ce sélecteur sélectionne tout élément img qui est un descendant d'un élément avec un attribut de classe qui contient le mot preview, qui est un descendant d'un élément avec un attribut id qui est égale à la barre latérale. Votre situation particulière peut être différent, bien sûr, mais essayer de venir avec un sélecteur qui vise spécifiquement à seulement les images que vous souhaitez centrer.

    3. Faire l'IMG un élément de niveau bloc. Dans le scénario ci-dessus, ce serait la règle CSS.

      .preview sidebar img {

      affichage: d'îlot
      }

    4. Ajouter des règles de marge qui sera centrer l'image. Dans le scénario ci-dessus, ce serait la règle complète.

      .preview sidebar img {

      affichage: d'îlot
      margin-right: auto-
      margin-left: auto-
      }

    5. La règle à l'étape 4 est tout ce que vous besoin- simplement vous assurer que votre sélection est suffisamment précis pour cibler uniquement les images que vous voulez retrouver au centre.

    » » » » Comment centrer une image avec css