Remplacer par une solution XHTML "valide" et cross-browser l’attribut "absmiddle".
Tags : CSS , HTML/XHTML
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 en ligne : http://forum.alsacreations.com/topi...
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 commentaires
# Le 26 février 2008 à 16:22, par marco En réponse à : Centrer verticalement une image et du texte
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
# Le 28 février 2008 à 15:33, par Abel Poucet En réponse à : Centrer verticalement une image et du texte
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.
# Le 3 mars 2008 à 07:58, par Felipe En réponse à : Alsacreation, vraiment ?
Bonjour,
je pense qu’il s’agit de AlsacreationS et non de http://www.alsacreation.com ;)
Pour revenir au sujet, un item de la FAQ regroupe plusieurs méthodes et techniques :
http://forum.alsacreations.com/faq/...
# Le 3 mars 2008 à 16:19, par Abel Poucet En réponse à : Centrer verticalement une image et du texte
Ha ! Ha ! Sauvons les kiwis...
Merci pour le lien.
# Le 1er juillet 2008 à 23:56, par Ka En réponse à : Centrer verticalement une image et du texte
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
# Le 12 août 2008 à 16:18, par Pandore En réponse à : Centrer verticalement une image et du texte
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. :(
# Le 20 mars 2009 à 12:07, par Poulpy En réponse à : Centrer verticalement une image et du texte
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.
# Le 21 mars 2009 à 08:41, par Caro En réponse à : Centrer verticalement une image et du texte
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 ???
# Le 10 juin 2009 à 23:46, par Night En réponse à : Centrer verticalement une image et du texte
J’ai fait exactement ce qu’il est dit et sa ne marche pas ... :S
Doit on avoir un CSS uniquement consacré à sa ?
# Le 4 août 2009 à 09:44 En réponse à : Centrer verticalement une image et du texte
Merci bien c’est ok ici !
Répondre à cet article
Suivre les commentaires :
| 