Soyez sociable ! Partagez :
L' alignement vertical d'une image est une problématique qui revient aussi souvent que les bronzés font du ski à Noël ! Et pour le moment, le CSS n'intègre toujours pas cette fonctionnalité.
Comment aligner verticalement une image ?
Alors qu'aujourd'hui on est capable de faire des ronds et d'écrire dedans en CSS, il n'existe toujours pas de propriété CSS capable d' aligner verticalement une image.
Pour ça on va utiliser un petit stratagème très simple.
On va commencer par créer notre structure HTML :
<div class="item">
<div class="middle"></div>
<img src="path_to_your_img" />
</div>
L'astuce HTML ici, c'est la <div> avant votre image ! C'est cette <div> que nous allons aligner verticalement et l'image suivra l'alignement !
Le CSS :
.item{
width:200px;
height:200px;
border: solid 1px #000;
text-align: center;
}
.middle{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.item img{
vertical-align: middle;
margin: 0 auto;
width: auto;
}
Le CSS est simple, mais efficace.
Ce tutoriel s'arrête ici, comme d'habitude, n'hésitez pas à partager avec moi vos astuces ou vos interrogations en commentant cet article !
Retrouvez le code complet sur JSFiddle.
Enjoy it !