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-align
proprié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-align
proprié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-fit
proprié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-position
propriété pour obtenir plus de contrôle sur la façon dont le média est affiché.
Fondamentalement, nous utilisons la object-fit
proprié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
: similairecontain
mais recadrant souvent le contenu.none
: affiche l'image dans sa taille d'origine.scale-down
: comparez la différence entrenone
etcontain
pour trouver la plus petite taille d'objet concret.
Compatibilité du navigateur
Le object-fit
est 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