Un bouton étirable où le texte ne se centre pas... ?

Bonjour tout le monde,

Je viens de faire une petite série de boutons étirables en largeur mais il me reste 2 p'tits soucis auxquels je ne trouve pas de soluce :
- j'ai prévu une hauteur de 2 ligne pour ces boutons car le cas de figure doit pouvoir arriver, seulement quand le texte est sur 2 lignes, je n'arrive pas à l'aligner, même avec du text-align:center;
- j'aimerais que si il n'y a qu'une ligne de texte, ce texte puisse être centré en hauteur et là encore je n'y parviens pas, même avec un vertical-align:middle.

Je vous ai mis deux exemples ici

et voici le code de ma CSS :

span.boutonBleu {
	margin: 0;
	padding: 0;
	font: bold 12px "Trebuchet MS", Helvetica, sans-serif;
	color: #0b6095;
	border: 0;
	background: none;
	text-align: center;
	vertical-align: middle;
}
span.boutonBleu span{
	float: left;
	padding: 0 0 0 15px;
	vertical-align: middle;
	background: url("img/btnbleu-gauche.jpg") left top no-repeat;
}
span.boutonBleu span span{
	padding: 0 15px 0 0;
	background: url("img/btnbleu-droite.jpg") right top no-repeat;
}
span.boutonBleu span span span{
	height: 37px;
	padding: 6px 0 5px 0;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	background: url("img/btnbleu-centre.jpg") left top repeat-x;
}
span.boutonBleu span span span a{
	color:#0b6095;
}
span.boutonRouge {
	margin: 0;
	padding: 0;
	font: bold 12px "Trebuchet MS", Helvetica, sans-serif;
	color: #a50b0e;
	border: 0;
	background: none;
	text-align: center;
	vertical-align: middle
}
span.boutonRouge span{
	float: left;
	padding: 0 0 0 15px;
	vertical-align: middle;
	background: url("img/btnrouge-gauche.jpg") left top no-repeat;
}
span.boutonRouge span span{
	padding: 0 15px 0 0;
	background: url("img/btnrouge-droite.jpg") right top no-repeat;
}
span.boutonRouge span span span{
	height: 37px;
	padding: 6px 0 5px 0;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	background: url("img/btnrouge-centre.jpg") left top repeat-x;
}
span.boutonRouge span span span a{
	color:#a50b0e;
}

si vous avez une piste, je suis preneur

Mârchi

Julien

hopla, j'me permets de faire un petit up du sujet...
Si vous avez des pistes je suis preneur.

muchas gracias.

Julien

j'apporte une petite pierre à l'édifice :
quand j'enlève le float:left; je récupère le centrage du texte mais évidemment ça devient le bordel sur le reste...

rahhhh