Notes

Centrer verticalement une image et du texte

Remplacer par une solution XHTML "valide" et cross-browser l’attribut "absmiddle".

Tags : ,

L’attribut "absmiddle", appliqué sur une image, la centre verticalement avec le centre "absolu" du texte (et non avec sa baseline), cette solution a deux inconvéniants, elle n’est pas XHTML "valide" et ne fonctionne que sur Internet Explorer.

Sur les forums de Alsacreations j’ai trouvé cette solution que j’utilise souvent, elle marche dans IE FF Opera et Safari. La solution est "vertical-align : middle" couplé avec "display : inline-block".

Le code HTML :

<div class="align_image">
   <img src="fichier.png" alt="" /><span>Le texte</span>
</div>

Les styles CSS :

.align_image img, .align_image span {
  vertical-align: middle;
  display: inline-block;
}
Voir l'exemple en ligne->http://...

Voir en ligne : http://forum.alsacreations.com/topi...

P.-S.

Le topic du forum d’alsacreations où j’ai trouvé cette technique : http://forum.alsacreations.com/topi...

Pour aller plus loin, la FAQ d’Alsacreations sur le positionnement, l’alignement et le centrage d’éléments : http://forum.alsacreations.com/faq/...

© 2017 - Abel Poucet web design