28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je ne parviens pas à aligner verticalement une ligne de texte dans une cellule.
( voir la page )

http://www.surfing-corsica.fr/capo_classic.html

J'ai une image sur un background et un texte qui change en fonction du titre

le tableau concerné:

html cellule :
<td colspan="2" class="titre_chapitre"><img src="images/puce_chapitres_tr.gif" alt="" />Capo Classic - 11 Ao&ucirc;t 2007 </td>


classe du tableau:

.tableau_chapitres
{ width:850px;
margin:auto;
border-collapse:collapse;
border:#003366 1px solid;
background-color:#c2d7f8 }

classe de la cellule dans laquelle je veux mettre le titre du chapitre:

.titre_chapitre
{ background-image:url(../images/texture_chapitres.jpg);
line-height:35px;
vertical-align:middle;
font-size:14px;
color:#003366;}

merci de m'éclairer!

kayorn
Modérateur
bonjour

l'alignement vertical que tu recherche ici se situe au niveau du texte et de l'image.

Par defaut une image est en : vertical-align:baseline; , comme le texte.

Une cellule de tableau a aussi la capacité de s'adapté a son contenu.

Alors en elimenant le height et line-height et le vertcal-align (ici sans utilités) :
<edit>recallé l'image de fondici a 0 0 </>
.titre_chapitre
{  background:url(../images/texture_chapitres.jpg) 0;
font-size:14px;
color:#003366;}

puis en replaçant l'image:
.titre_chapitre img
{ 
vertical-align:middle;
}


tu devrais obtenir le résultat voulu de façon toute naturelle.

GC
Modifié par gcyrillus (06 Apr 2008 - 14:04)