[CSS] Alignement vertical du texte

7804j · 20 Avril 2011

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:

<div class="aide">Texte d'aide</div>

Code:

.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

smorge · 20 Avril 2011

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

7804j · 20 Avril 2011

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

smorge · 20 Avril 2011

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

7804j · 20 Avril 2011

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

CARREZ · 20 Avril 2011

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

Supermaury · 20 Avril 2011

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

7804j · 20 Avril 2011

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" ?

Supermaury · 20 Avril 2011

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:

<!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>

lambi521 · 20 Avril 2011

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

7804j · 21 Avril 2011

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

Blount · 21 Avril 2011

Je dirais même :

Code:

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

Supermaury · 21 Avril 2011

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

@++

7804j · 21 Avril 2011

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:

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

}

Supermaury · 21 Avril 2011

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

7804j · 21 Avril 2011

Bah...Ca fait la même chose :/