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-) élément comme premier (ou dernier) enfant du parent , et définissons sa height
propriété sur 100%
pour prendre toute la hauteur de son parent .
2) De plus, l'ajout vertical-align: middle
garde les éléments en ligne (-block) au milieu de l'interligne. Donc, nous ajoutons cette déclaration CSS au premier enfant et à notre élément (l' image ) à la fois.
3) Enfin, afin de supprimer le caractère d'espace blanc entre les éléments en ligne (-bloc) , nous pourrions définir la taille de la police du parent à zéro par font-size: 0;
.
Remarque: 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 dynamiques.
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 <div>
élément verticalement également; qui peut avoir un contenu dynamique (hauteur et / ou largeur). Mais notez que vous devez redéfinir la font-size
propriété de div
pour afficher le texte intérieur. Démo en ligne .
<div class="container">
<div id="element"> ... </div>
</div>
.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
Conteneur réactif
Cette section ne répondra pas à la question car l'OP sait déjà comment créer un conteneur réactif. Cependant, je vais vous expliquer comment cela fonctionne.
Afin de faire changer la hauteur d'un élément de conteneur avec sa largeur (en respectant les proportions), nous pourrions utiliser une valeur de pourcentage pour la padding
propriété haut / bas .
Une valeur de pourcentage sur le remplissage ou les marges haut / bas est relative à la largeur du bloc conteneur.
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.
De plus, nous pourrions appliquer la padding
propriété à un mannequin enfant ou :before
/ :after
pseudo-élément pour obtenir le même résultat. Mais notez que dans ce cas, la valeur en pourcentage sur padding
est relative à la largeur de .responsive-container
lui - même.
<div class="responsive-container">
<div class="dummy"></div>
</div>
.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 n ° 1 .
Démo # 2 (Utilisation d'un :after
pseudo-élément)
Ajout du contenu
L'utilisation de la padding-top
propriété crée un espace énorme en haut ou en bas du contenu, à l'intérieur du conteneur .
Pour résoudre ce problème, nous avons envelopper le contenu par un élément d'emballage, retirer cet élément du document flux normal en utilisant le positionnement absolu , et enfin développer l'emballage (bu en utilisant top
, right
, bottom
et left
propriétés) 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 rassembler tous
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.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 DEMO DE TRAVAIL .
Évidemment, vous pouvez éviter d'utiliser un ::before
pseudo-élément pour la compatibilité du navigateur et créer un élément en tant que premier enfant de .img-container
:
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
DÉMO MISE À JOUR .
Utilisation des max-*
propriétés
Afin de garder l'image à l'intérieur de la boîte dans une largeur inférieure, vous pouvez définir max-height
et max-width
propriété 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 .