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;
}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/...
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
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.
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/...
Ha ! Ha ! Sauvons les kiwis... Merci pour le lien.
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 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. :(
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.
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 ???
J’ai fait exactement ce qu’il est dit et sa ne marche pas ... :S
Doit on avoir un CSS uniquement consacré à sa ?
Merci bien c’est ok ici !
© Abel Poucet Webdesign - Motorisé par