Aligner un texte en bas de son élément de menu

Bonsoir,

Je galère sur un alignement de texte en bas du conteneur... Je croyais que "vertical-align" marcherait, mais je crois finalement avoir compris que c'est surtout prévu pour les tableaux (??)...

J'ai donc :
- de gros boutons carrés qui forment les éléments d'un menu (#ja-mainnav ul.menu li a)
- dans ces boutons, le texte du lien (#ja-mainnav ul.menu li a span)

J'aimerais aligner le texte en bas des boutons. Pour l'instant je m'en sortais avec un position:relative et top:80%, mais tous mes textes ne sont pas de la même longueur et certains occupent deux lignes. Je dois donc vraiment trouver un moyen d'aligner la dernière ligne du texte sur le bas du bouton.

Mon CSS :

#ja-mainnav ul.menu li a {   /* Zone réactive dans le carré bleu */
	margin: 0;
	padding: 0px 5px;
	height:85px;
	display: block;
	color: #ffffff;
	font-weight: bold;
	line-height: normal;
	text-decoration: none;
}

#ja-mainnav ul.menu li a span {   /* Texte des boutons */
	position:relative;
	top:80%;
	text-transform:uppercase;
	font-weight:normal;
	font-size:0.9em;
}

Vous avez une idée ?

(Si vous n'avez pas compris mes explications, je peux recommencer plus clairement...)

Merci d'avance
Modifié par K'm (18 Jan 2010 - 02:42)

Bonjour,

Avec la positionnement relatif, tu as la posibilité de préciser des valeur pour top ou bottom et pour left ou right.

Du coup,

bottom:0;

au lieu de

top:80%;

devrait fonctionner.

Bizarrement, ça ne marchait pas avec la position relative, mais en absolue, si.

Merci