Comment centrer une image à l'aide de l'alignement du texte: Centrer

Programmation

Un élément est un élément en ligne (valeur d'affichage de inline-block). Il peut être facilement centré en ajoutant la text-align: center;propriété CSS à l'élément parent qui le contient.

Pour centrer une image en utilisant, text-align: center;vous devez placer l' intérieur d'un élément de niveau bloc tel qu'un div. Étant donné que la text-alignpropriété ne s'applique qu'aux éléments de niveau bloc, vous placez text-align: center;sur l'élément de niveau bloc d'habillage pour obtenir un élément centré horizontalement .

Exemple

   Center an Image using text align center  .img-container { text-align: center; }

Remarque: l' élément parent doit être un élément de bloc. S'il ne s'agit pas d'un élément de bloc, vous devez ajouter unedisplay: block;propriété CSS avec latext-alignpropriété.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

Démo: Codepen

Ajustement de l'objet

Une fois votre image centrée, vous souhaiterez peut-être la redimensionner. La object-fitpropriété spécifie comment un élément répond à la largeur / hauteur de sa boîte parent.

Cette propriété peut être utilisée pour une image, une vidéo ou tout autre média. Il peut également être utilisé avec la object-positionpropriété pour obtenir plus de contrôle sur la façon dont le média est affiché.

Fondamentalement, nous utilisons la object-fitpropriété pour définir la manière dont elle étire ou écrase un média en ligne.

Syntaxe

.element

Valeurs

  • fill: Il s'agit de la valeur par défaut . Redimensionnez le contenu pour qu'il corresponde à sa boîte parente, quel que soit le rapport hauteur / largeur.
  • contain: Redimensionnez le contenu pour remplir sa zone parent en utilisant le rapport hauteur / largeur correct.
  • cover: similaire containmais recadrant souvent le contenu.
  • none: affiche l'image dans sa taille d'origine.
  • scale-down: comparez la différence entre noneet containpour trouver la plus petite taille d'objet concret.

Compatibilité du navigateur

Le object-fitest pris en charge par la plupart des navigateurs modernes, pour les informations les plus récentes sur la compatibilité, vous pouvez consulter ceci //caniuse.com/#search=object-fit.

Documentation

  • text-align - MDN
  • ajustement d'objet - MDN
  • - MDN