Aligner verticalement une image à l’intérieur d’un div avec une hauteur réactive

J’ai le code suivant qui configure un conteneur qui a une hauteur qui change avec la largeur lorsque le navigateur est redimensionné (pour maintenir un rapport d’aspect carré).

HTML

CSS

 .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces 1:1 aspect ratio */ } .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 

Comment puis-je aligner verticalement l’IMG à l’intérieur du conteneur? Toutes mes images ont des hauteurs variables et le conteneur ne peut pas avoir une hauteur / hauteur de ligne fixe car il est réactif … S’il vous plaît, aidez!

Voici une technique pour aligner des éléments en ligne à l’intérieur d’un parent , horizontalement et verticalement en même temps:

Alignement vertical

1) Dans cette approche, nous créons un inline-block (pseudo- ) in inline-block comme premier (ou dernier) enfant du parent et définissons sa propriété height sur 100% pour prendre toute la hauteur de son parent .

2) En outre, append vertical-align: middle conserve les éléments en ligne (-block) au milieu de l’espace de ligne. Nous ajoutons donc cette déclaration CSS au premier-enfant et à notre élément (l’ image ) tous les deux.

3) Enfin, afin de supprimer le caractère blanc entre les éléments en ligne (-block) , nous pourrions définir la taille de la police du parent sur zéro par font-size: 0; .

Note: J’ai utilisé la technique de remplacement d’image de Nicolas Gallagher dans ce qui suit.

Quels sont les bénéfices?

  • Le conteneur ( parent ) peut avoir des dimensions dynamics.
  • Il n’est pas nécessaire de spécifier explicitement les dimensions de l’élément d’image.

  • Nous pouvons facilement utiliser cette approche pour aligner un élément

    verticalement également; qui peut avoir un contenu dynamic (hauteur et / ou largeur). Mais notez que vous devez redéfinir la propriété font-size du div pour afficher le texte intérieur. Démo en ligne

 
...
 .container { height: 300px; text-align: center; /* align the inline(-block) elements horizontally */ font: 0/0 a; /* remove the gap between inline(-block) elements */ } .container:before { /* create a full-height inline block pseudo=element */ content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } #element { display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ font: 16px/1 Arial sans-serif; /* < -- reset the font property */ } 

Le résultat

Aligner verticalement un élément dans son conteneur

Conteneur réactif

Cette section ne va pas répondre à la question car l'OP sait déjà créer un conteneur réactif. Cependant, je vais vous expliquer comment cela fonctionne.

Pour que la hauteur d'un élément de conteneur change avec sa largeur (en respectant les proportions), nous pourrions utiliser une valeur de pourcentage pour la propriété de padding haut / bas.

Une valeur en pourcentage sur le remplissage supérieur / inférieur ou les marges est relative à la largeur du bloc contenant.

Par exemple:

 .responsive-container { width: 60%; padding-top: 60%; /* 1:1 Height is the same as the width */ padding-top: 100%; /* width:height = 60:100 or 3:5 */ padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */ padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */ } 

Voici la démo en ligne . Commentez les lignes du bas et redimensionnez le panneau pour voir l’effet.

En outre, nous pourrions appliquer la propriété padding à un enfant factice ou à un pseudo-élément :before / :after pour obtenir le même résultat. Mais notez que dans ce cas, la valeur en pourcentage sur le padding est relative à la largeur du .responsive-container même.

 
 .responsive-container { width: 60%; } .responsive-container .dummy { padding-top: 100%; /* 1:1 square */ padding-top: 75%; /* w:h = 4:3 */ padding-top: 56.25%; /* w:h = 16:9 */ } 

Démo # 1 .
Démo # 2 (Utilisation de :after pseudo-élément)

Ajouter le contenu

L'utilisation de la propriété padding-top crée un espace énorme en haut ou en bas du contenu, à l'intérieur du conteneur .

Afin de résoudre ce problème, nous avons enveloppé le contenu par un élément wrapper, supprimé cet élément du document en utilisant un positionnement absolu et enfin développé le wrapper (en utilisant top propriétés top , right , bottom et left ) pour remplir tout l'espace. de son parent, le conteneur .

Et c'est parti:

 .responsive-container { width: 60%; position: relative; } .responsive-container .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

Voici la démo en ligne .


Se réunir tous ensemble

 
 .img-container { text-align:center; /* Align center inline elements */ font: 0/0 a; /* Hide the characters like spaces */ } .img-container:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; } .img-container img { vertical-align: middle; display: inline-block; } 

Voici la démo de travail .

Évidemment, vous pourriez éviter d'utiliser ::before pseudo-element pour la compatibilité du navigateur , et créer un élément en tant que premier enfant du .img-container :

 
 .img-container .centerer { display: inline-block; vertical-align: middle; height: 100%; } 

MISE À JOUR DEMO

Utiliser les propriétés max-*

Pour conserver l'image à l'intérieur de la boîte en largeur inférieure, vous pouvez définir la propriété max-height et max-width sur l'image:

 .img-container img { vertical-align: middle; display: inline-block; max-height: 100%; /* < -- Set maximum height to 100% of its parent */ max-width: 100%; /* <-- Set maximum width to 100% of its parent */ } 

Voici la démo mise à jour .

Avec Flexbox c’est facile:

VIOLON

Ajoutez simplement ce qui suit au conteneur d’images:

 .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; /* add */ justify-content: center; /* add to align horizontal */ align-items: center; /* add to align vertical */ } 

Utilisez ce css, car vous avez déjà le balisage:

 .img-container { position: absolute; top: 50%; left: 50%; } .img-container > img { margin-top:-50%; margin-left:-50%; } 

Voici un JsBin fonctionnel: http://jsbin.com/ihilUnI/1/edit

Cette solution ne fonctionne que pour les images carrées (car une valeur de marge en pourcentage dépend de la largeur du conteneur et non de la hauteur). Pour les images de taille aléatoire, vous pouvez effectuer les opérations suivantes:

 .img-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* add browser-prefixes */ } 

Solution de travail JsBin: http://jsbin.com/ihilUnI/2/edit

Vous pouvez centrer une image, à la fois horizontalement et verticalement, en utilisant la margin: auto et absolu. Aussi:

  1. Il est possible de supprimer le balisage supplémentaire en utilisant des pseudo-éléments.
  2. Il est possible d’afficher la partie centrale des images LARGE en utilisant les valeurs négatives gauche, supérieure, droite et inférieure.
 .responsive-container { margin: 1em auto; min-width: 200px; /* cap container min width */ max-width: 500px; /* cap container max width */ position: relative; overflow: hidden; /* crop if image is larger than container */ background-color: #CCC; } .responsive-container:before { content: ""; /* using pseudo element for 1:1 ratio */ display: block; padding-top: 100%; } .responsive-container img { position: absolute; top: -999px; /* use sufficiently large number */ bottom: -999px; left: -999px; right: -999px; margin: auto; /* center horizontally and vertically */ } 
 

Note: images are center-cropped on <400px screen width.
Open full page demo and resize browser.

Essaye celui-là

  .responsive-container{ display:table; } .img-container{ display:table-cell; vertical-align: middle; } 

Je suis tombé sur ce fil à la recherche d’une solution qui:

  • utilise 100% de la largeur de l’image donnée
  • conserve le format de l’image
  • maintient l’image alignée verticalement au milieu
  • fonctionne dans les navigateurs qui ne supportent pas complètement le flex

En testant certaines des solutions affichées ci-dessus, je n’ai pas trouvé de solution répondant à tous ces critères, j’ai donc mis au point cette solution simple qui pourrait être utile pour d’autres personnes ayant besoin de faire la même chose:

 .container { width: 30%; float: left; border: 1px solid turquoise; margin-right: 3px; margin-top: 3px; } .container:last-of-kind { margin-right: 0px; } .image-container { position: relative; overflow: hidden; padding-bottom: 70%; /* this is the desired aspect ratio */ width: 100%; } .image-container img { position: absolute; /* the following 3 properties center the image on the vertical axis */ top: 0; bottom: 0; margin: auto; /* uses image at 100% width (also meaning it's horizontally center) */ width: 100%; } 
 

Essayer

Html

 

CSS

 .img-container { position: absolute; top: 0; left: 0; height:0; padding-bottom:100%; } .img-container img { width:100%; } 

Voici une technique qui vous permet de centrer tout contenu à la fois verticalement et horizontalement!

Fondamentalement, vous n’avez besoin que de deux conteneurs et assurez-vous que vos éléments répondent aux critères suivants.

Le conteneur extérieur:

  • devrait avoir l’ display: table;

Le récipient intérieur:

  • devrait avoir l’ display: table-cell;
  • devrait avoir vertical-align: middle;
  • devrait avoir text-align: center;

La zone de contenu:

  • devrait avoir l’ display: inline-block;

Si vous utilisez cette technique, ajoutez simplement votre image (ainsi que tout autre contenu que vous souhaitez accompagner) dans la zone de contenu.

Démo:

 body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; background: #fff; padding : 12px; border : 1px solid #000; } img { max-width : 120px; } 
 

Code HTML

code css

 img { position: relative; top: 50%; transform: translateY(-50%); } 

Faites un autre div et ajoutez à la fois “dummy” et “img-container” dans le div

Ne HTML et CSS comme suit

 html , body {height:100%;} .responsive-container { height:100%; display:table; text-align:center; width:100%;} .inner-container {display:table-cell; vertical-align:middle;} 
 
Sample
Image tag