Abel Poucet Webdesign
Accueil du site > tools > Centrer verticalement une image et du texte
Centrer verticalement une image et du texte

Centrer verticalement une image et du texte

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

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.


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

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://...

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/...

Vos réactions

marco, [26 février 2008]

Désolé, mais ce truc ne fonctionne nulle part !! De toute façon, voilà au moins deux semaines que je passe pratiquement toutes les journées à chercher une solution qui N’EXISTE PAS !!

Il semble IMPOSSIBLE d’aligner verticalement un texte par rapport à une image avec du css !! C’est absolument dingue !! Une telle carence pour un besoin totalement ordinaire, et surtout, pas un seul des gurus du css qui ne propose quelque chose de fonctionnel ...

Marc

abel, [28 février 2008]

Bonjour Marc,

regarde l’exemple que j’ai mis en ligne, cela semble marcher partout, le centre de l’images est bien aligné sur le centre absolu du texte : exemple

Sinon il n’y a pas de guru par ici, comme je l’indique ici, je rassemble juste des techniques que j’ai grapillées à droite et à gauche sur le net.

Si tu cherches un très bon site sur les CSS je te conseille alsacreation.

Felipe, [3 mars 2008]

Bonjour,

je pense qu’il s’agit de AlsacreationS et non de http://www.alsacreation.com&nbsp;;)

Pour revenir au sujet, un item de la FAQ regroupe plusieurs méthodes et techniques : http://forum.alsacreations.com/faq/...

abel, [3 mars 2008]

Ha ! Ha ! Sauvons les kiwis... Merci pour le lien.

Ka, [1er juillet 2008]

Merci pour cette technique qui a fonctionné chez moi. Incroyables tout de même les lacunes et la complexité du CSS dans certains cas. Sans parler de la calamité du navigateur #1 qui ne fait rien comme les autres

Pandore, [12 août 2008]

Le problème est que le texte doit être impérativement sur une seule ligne. Si on a plusieurs lignes, ça ne fonctionne plus et le texte se retrouve en dessous de l’image. Bref, ce n’est pas la solution miracle. :(

Poulpy, [20 mars 2009]

Cette solution fonctionne bien chez moi ... à condition de ne pas utiliser la propriété "float" :-/

Si je veux mon texte complètement à gauche et mon image complètement à droite, c’est foutu XD

Je vais donc continuer de chercher la solution en me basant sur cette méthode.

Caro, [21 mars 2009]

J’ai copié exactement la même chose en changeant juste l’image et ça ne marche pas !!!

Est ce que cela pourrait venir de l’image ???

Night, [10 juin 2009]

J’ai fait exactement ce qu’il est dit et sa ne marche pas ... :S

Doit on avoir un CSS uniquement consacré à sa ?

[4 août 2009]

Merci bien c’est ok ici !

Réagir

(Vous pouvez laisser un message en remplissant les champs ci-dessous)


Votre réaction :

Navigation alternative :

Contact

  • 14 bis, bd de l'Hôpital 75005 Paris
  • 06 81 35 98 00

Navigation / syndication

logo abel                        © Abel Poucet Webdesign - Motorisé par SPIP - Webdesign : Abel Poucet