Comment centrer l'image verticalement dans un div

centrer verticalement une image dans un div bootstrap: un guide complet

Cet article aborde divers aspects de la centrage verticalement des images dans Bootstrap Divs, explorant différentes techniques et leur efficacité.

Bootstrap: comment centrer verticalement une image dans un div? s'appuie sur Flexbox. Bootstrap 4 et 5 prennent facilement en charge Flexbox, ce qui en fait une solution propre et efficace. Voici comment:

Appliquez Flexbox au parent div:
1. Ajoutez la classe et à votre div. d-flex Permet la disposition Flexbox et align-items-center centre verticalement les éléments dans le conteneur Flex. d-flex align-items-center
Assurez-vous que l'image a une hauteur définie:
2. Flexbox centres des éléments en fonction de leur taille inhérente. Si votre image n'a pas de hauteur fixe (par exemple, elle est définie sur ), elle peut ne pas être centrée correctement. Envisagez de définir une hauteur spécifique ou d'utiliser des techniques de rapport d'aspect (discutées plus loin). auto
Facultatif: Justifier le contenu:
3. Si vous souhaitez également centrer l'image horizontalement, ajoutez à votre div. justify-content-center

Exemple:

Ce code snippet créa un div avec une hauteur de 200p. Les classes

<code class="html"><div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image">
</div></code>

,

et d-flex garantissent à la fois le centrage vertical et horizontal de l'image dans cet espace. N'oubliez pas de remplacer align-items-center par le chemin réel de votre image. justify-content-center "your-image.jpg" Comment puis-je empêcher le débordement d'image lorsque le dépassement vertical de l'image est plus en train de le centrer lorsque l'image est plus grande que son div contenant. Pour éviter cela, vous devez contrôler la taille de l'image. Voici plusieurs approches:

set

et

:
1. Cela limite la taille de l'image tout en maintenant son rapport d'aspect. Combinez ceci avec la méthode Flexbox ci-dessus: max-width max-height

Utiliser

<code class="html"><div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image" style="max-width: 100%; max-height: 100%;">
</div></code>

:

Cette propriété CSS contrôle comment une image est redimensionnée pour s'adapter à son conteneur.
2. va mettre à l'échelle l'image pour s'adapter dans le conteneur tout en maintenant son rapport d'aspect, en ajoutant potentiellement la boîte aux lettres (espace vide). Échellera l'image pour couvrir complètement le conteneur, des parties potentiellement recadrées de l'image. object-fit object-fit: contain; object-fit: cover;

Images de pré-processus:

<code class="html"><div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image" style="object-fit: contain;">
</div></code>

Rédigez vos images avant de les télécharger dans les dimensions appropriées pour éviter les problèmes de débordement. Et quel est le plus efficace?

3. Plusieurs méthodes existent, mais Flexbox est généralement considéré comme l'approche la plus efficace et la plus moderne:
   1. flexbox (recommandé): Comme détaillé ci-dessus, il est propre, concis et largement pris en charge.
   2. Disposition de la grille: Similaire à Flexbox, la grille offre des capacités de mise en page puissantes et peut également atteindre un centrage vertical. Cependant, Flexbox est souvent plus simple pour cette tâche spécifique.
   3. Positionnement absolu et transforme: Cela implique de positionner absolument l'image au sein de son parent, puis d'utiliser transform: translateY(-50%); pour le centrer verticalement. Ceci est moins efficace et nécessite plus de calcul manuel que Flexbox. Il a également besoin d'une hauteur et d'une largeur spécifiques pour le conteneur parent.
   4. Disposition basée sur la table (non recommandée): Il s'agit d'une technique obsolète et doit être évité en faveur de méthodes de mise en page modernes comme Flexbox ou Grid. JavaScript?
   Oui, la méthode Flexbox décrite ci-dessus est une solution CSS pure. Cela ne nécessite aucun javascript. L'utilisation de

   pour gérer le débordement est également une approche CSS pure. Par conséquent, vous pouvez atteindre un centrage vertical d'images dans Bootstrap Divs efficacement et sans recourir à JavaScript.

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!