Maison > interface Web > Questions et réponses frontales > Une brève analyse de plusieurs méthodes de définition d'images centrées en CSS

Une brève analyse de plusieurs méthodes de définition d'images centrées en CSS

PHPz
Libérer: 2023-04-13 10:38:32
original
3606 Les gens l'ont consulté

Dans la conception Web, les images sont un élément très important et sont souvent utilisées comme une partie importante de la mise en page. Alors, lors du réglage de la position d'affichage de l'image, comment obtenir l'affichage centré de l'image via CSS ? Cet article vous présentera la méthode de définition d'une image centrée en CSS.

  1. Définir l'image d'arrière-plan dans div

Avec background-image, nous pouvons obtenir le paramètre d'arrière-plan de l'image le plus simple. Tout d'abord, en HTML, nous définissons un élément div et lui attribuons un identifiant unique :

<div id="img_div"></div>
Copier après la connexion

Ensuite, en CSS, nous utilisons le code suivant pour définir l'image d'arrière-plan et définir l'attribut background-position sur center, et c'est tout. Affichage centré :

#img_div {
  background-image: url("image.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
Copier après la connexion

Parmi eux, l'attribut background-size est défini sur cover pour garantir que l'image peut être mise à l'échelle proportionnellement à la même largeur et hauteur que le conteneur lorsqu'elle est affichée.

  1. Utilisez la position et la marge pour centrer l'image

Pour l'élément d'image lui-même, nous pouvons obtenir un affichage centré en définissant son attribut de position et son attribut de marge. Tout d'abord, en HTML, nous définissons un élément img et définissons un identifiant unique :

<img id="img_elem" src="image.jpg" />
Copier après la connexion

Ensuite, en CSS, nous pouvons définir sa position sur absolue, puis ajuster sa valeur de marge pour obtenir un affichage centré :

#img_elem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copier après la connexion

Parmi eux, définissez les attributs left et top à 50 % pour positionner l'élément au centre du conteneur parent, et la fonction translation() de l'attribut transform peut déplacer l'élément à la moitié de sa propre largeur et hauteur pour obtenir un affichage centré.

  1. Utilisez la disposition flexible pour centrer l'image

La disposition flexible est l'une des fonctionnalités importantes de CSS3, qui peut facilement implémenter la disposition des éléments. Parmi eux, vous pouvez obtenir un alignement central horizontal et vertical des éléments enfants dans le conteneur en définissant les propriétés justifier-content et align-items du conteneur flexible. Voyons ensuite comment centrer l’image.

Tout d'abord, en HTML, nous définissons un élément div et définissons un identifiant unique :

<div id="img_div">
  <img src="image.jpg" />
</div>
Copier après la connexion

Ensuite, en CSS, nous définissons l'élément div comme un conteneur flexible et définissons les attributs justifier-contenu et align-items au centre, l'image peut être affichée au centre :

#img_div {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}
Copier après la connexion

De cette façon, après avoir défini ces attributs de l'élément div où se trouve l'image, son sous-élément img peut automatiquement être affiché au centre.

Résumé

Ci-dessus, il existe plusieurs façons de définir des images centrées en CSS. Parmi elles, les méthodes d'utilisation de background-image et position + margin sont relativement simples, tandis que l'utilisation de flex layout peut gérer plus facilement la disposition des éléments enfants. Différentes méthodes conviennent à différents scénarios. Les développeurs peuvent choisir la méthode qui leur convient en fonction de la situation réelle et l'utiliser de manière flexible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal