[CSS] Alignement vertical du texte

7804j

WRInaute discret
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 :)
 

7804j

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

7804j

WRInaute discret
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

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

7804j

WRInaute discret
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

WRInaute discret
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>
 

7804j

WRInaute discret
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

WRInaute impliqué
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.
 

7804j

WRInaute discret
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

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

Discussions similaires

Haut