Comment faire apparaître les images centrées de haut en bas en CSS

Méthodes pour utiliser CSS pour centrer l'image de haut en bas : utilisez flexbox, définissez la direction flexible du conteneur parent sur colonne, justifiez le contenu et alignez les éléments au centre. Utilisez le positionnement absolu, définissez la position de l'image sur absolue, en haut et à gauche à 50 % et utilisez l'attribut de transformation pour le décalage. Pour utiliser une disposition en grille, définissez l'affichage du conteneur parent sur grille et placez les éléments au centre. Utilisez l'attribut object-fit pour centrer l'image

Comment utiliser CSS pour centrer l'image de haut en bas

En CSS, vous pouvez utiliser la méthode suivante pour centrer l'image de haut en bas :

Méthode 1 : Utiliser flexbox

<code class="css">.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}</code>

Méthode 2 : Utiliser le positionnement absolu

<code class="css">.container {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

Méthode 3 : Utiliser la disposition en grille

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}</code>

Méthode 4 : Utiliser l'attribut d'ajustement d'objet

<code class="css">img {
  object-fit: contain;
}</code>

Cinquième méthode : utiliser padding

<code class="css">.container {
  padding: 20px 0;
}

img {
  height: 100px;
}</code>

Suggestions pour choisir une méthode :

• Si vous avez besoin d'autres éléments autour de l'image, utilisez une mise en page flexbox ou en grille.
• Si la taille de l'image est fixe, utilisez le positionnement absolu ou l'attribut d'ajustement d'objet.
• Si la taille de l'image n'est pas fixe, il est recommandé d'utiliser une disposition flexbox ou grille.

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!