[CSS] Alignement vertical du texte

**le Mer Avr 20, 2011 8:59**

Bonjour,

J'ai essayé de créer une div qui, quand je l'appelle, va afficher un texte d'aide. Pour cela, je voulais mettre une image (contenant un point d'interrogation) en background et centrée par rapport au texte :

Code: Tout sélectionner: <div class="aide">Texte d'aide</div>

Code: Tout sélectionner: .aide { background-image: url(/images/aide.png); background-position: left center; min-height: 64px; margin-left: 30px; padding-left : 70px; background-repeat: no-repeat; display: inline-block; vertical-align:middle; }

Mais malheureusement, le texte ne s'aligne pas verticalement : il commence tout en haut du div (donc en haut de mon image)...

Si qqn voit une erreur, merci

**le Mer Avr 20, 2011 9:27**

Essaie line-height : 64px; au lieu de vertical-align:middle; ?

**le Mer Avr 20, 2011 9:41**

L'idée n'est pas mauvaise mais ça ne joue pas à partir du moment où on a plus d'une ligne ^^'

**le Mer Avr 20, 2011 10:06**

Oui, je croyais que tu voulais juste aligner "texte d'aide"

**le Mer Avr 20, 2011 10:15**

Oui effectivement, désolé de ne pas avoir précisé. Mon texte peut avoir n'importe quelle taille, raison pour laquelle je n'arrive pas à l'aligner :/

**le Mer Avr 20, 2011 10:41**

Par défaut, on ne peux pas aligner verticalement un texte dans une div en CSS.

Tu peux utiliser display: table-cell; et le vertical-align, ça devrait marcher sur les vrais navigateurs, pas sur IE6, et IE7 (qu'à partir de IE8).

**le Mer Avr 20, 2011 10:55**

Peux-tu en dire plus sur ton Div stp.
A part sa hauteur minimale, a-t-il une largeur spécifique ?

**le Mer Avr 20, 2011 10:57**

Erf, j'ai essayé ta proposition mais du coup, quand il n'y a pas assez de texte, l'image ne s'affiche plus en entier. Apparemment la propriété min-heigth ne fonctionne plus avec table-cell :/

Tu dis qu'on ne peut pas aligner du texte verticalement dans une div ? Alors dans quel cas utilise-t-on "vertical-align" ?

**le Mer Avr 20, 2011 11:01**

Au lieu de te prendre la tête avec le centrage vertical dans le div, essaie ça qui passe partout.
Faut juste que l'addition de ton padding top et bottom soit plus grand que la hauteur de ton image (dans l'exemple mon gif fait 14x24).

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> .aide { font:normal 11px verdana,tahoma,arial; border:1px solid #d3d3d3; border-radius: 15px; -O-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding:15px 15px 15px 40px; background: url(aide.gif) 15px 50% no-repeat; width:200px } </style> </head> <body> <div class="aide"> Merci de bien vouloir saisir un code postal valide.<br /> Merci de bien vouloir saisir un code postal valide.<br /> Merci de bien vouloir saisir un code postal valide.<br /> </div> </body> </html>

**le Mer Avr 20, 2011 16:32**

Ou sinon tu fais un <table><tr><td>, pas de tonnes de csss et ton vertical-align fonctionnera !

**le Jeu Avr 21, 2011 13:29**

Merci, ton bout de code fonctionne très bien et a en plus un meilleur rendu que ce à quoi je m'attendais ! Je n'avais pas pensé à arrondir les bords, mais malheureusement cela ne marche bien sûr pas sur IE (j'ai pas testé sur la version 9 mais ça m'étonnerait aussi).

**le Jeu Avr 21, 2011 13:40**

Je dirais même :

Code: Tout sélectionner: -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;

Webkit est utilisé en autre par Safari et Chrome/Chromium, donc il ne faut pas l'ignorer.

**le Jeu Avr 21, 2011 14:42**

Bah pour IE, tu as les fichiers HTC qui te permettront également d'émuler les arrondis.

Voir : http://css3pie.com/ : lourd (33ko) mais il permet de rendre les arrondis, les dégradés et même les ombrages.

Ou celui là plus léger (5ko) uniquement pour les arrondis : http://code.google.com/p/curved-corner/downloads/list

@++

**le Jeu Avr 21, 2011 16:40**

Merci pour ta précision, je ne connaissais pas l'existence des htc.

J'ai donc essayé de l'implanter sur une de mes pages (en construction) mais malheureusement, au lieu de d'arrondir les bords, cela m'a fait disparaître toute la bordure et l'image de fond de la div ^^'

Tu peux comparer entre Chrome et IE8 : http://petitsjobs.ch/membres/inscription.php

Mon CSS me semblait pourtant correct :

Code: Tout sélectionner: .aide { font:normal 11px verdana,tahoma,arial; color: #347ab1; border:1px solid #d3d3d3; border-radius: 15px; -O-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; behavior: url(/app/border-radius.htc); padding-left:85px; padding-top: 25px; padding-bottom:25px; margin-right:20px; background: url(/images/aide.png) 15px 50% no-repeat; }

**le Jeu Avr 21, 2011 16:55**

Je viens de tester le second lien que je t'ai donné (celui hébergé via Google). Il pose effectivement problème avec le css.
Essaie le premier, cela devrait fonctionner nickel.
+++

[CSS] Alignement vertical du texte

[CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Re: [CSS] Alignement vertical du texte

Lectures recommandées sur ce thème :

Qui est en ligne