Centrer verticalement le contenu d'un menu

Bonjour à tous, j'ai un problème avec mon menu que je n'arrive pas à résoudre depuis plusieurs jours. Je voudrai que le texte de chaque élément du menu soit centré verticalement. La taille de chaque élément est de 97px et le contenu trop long reviens à la ligne.
Voici le code html de ce menu :

<ul class="topLevel">	    
	<li class="item.first.selected">
		<a href=""><div>Accueil</div></a>
	</li>
	<li class="item.haschild">	
		<a href=""><div>Qui sommes-nous?</div></a>
        <div class="subLevel">
		    <ul>			    
				<li class="item.first">
					<a href=""><div><!-- img src="" /--><span>Une entreprise vieillissante</span></div></a>
				</li>
				<li class="item.last">
					<a href=""><div><!-- img src="" /--><span>Une entreprise irresponsable</span></div></a>
				</li>
			</ul>
		</div>
	</li>
	<li class="item">
		<a href=""><div>Logiciel d’évolution de la rentabilité</div></a>	
	</li>
	<li class="item">	
		<a href=""><div>Logiciel de gestion des produits chloryque</div></a>	
	</li>
	<li class="item">	
		<a href=""><div>Vieille réglementaire</div></a>	
	</li>
	<li class="item">
		<a href=""><div>Nos autres prestations</div></a>
	</li>
	<li class="item.last">
		<a href="javascript:void(window.open(&#39; &#39;))"><div>Nos formations</div></a>	
	</li>
</ul>

Le code CSS :

#dnnMenu {
	width:688px;
	height:97px;
	background-image:url('Images/bg_dnnMenu.png');
	padding:0;
}
#dnnMenu ul {
	/*display:table-row;*/
	display:block;
}
#dnnMenu ul.topLevel {
	width:688px;
	height:97px;
}

#dnnMenu ul.topLevel li {
	display:inline-table;
	float:left;
	width:98px;
	height:77px;
	list-style-type:none;
	text-align:center;
	font-size:11px;
	margin-top:17px;
	/*display:table-cell;*/
	vertical-align:middle;
}

#dnnMenu .item {
	margin-right:0px;
}
	
#dnnMenu .topLevel li a {
	margin-top:auto;
	margin-bottom:auto;
	display:inline-block;
	height:97px;
	width:98px;
	text-align:center;
	color:#ffffff;
}

#dnnMenu .topLevel li:hover {
	background-image:url('Images/bg_dnnMenu_hover.png');
	background-repeat:repeat-x;
}

#dnnMenu .topLevel li:hover a, #dnnMenu .topLevel li a:hover {
	text-decoration:none;
	background-image:url('Images/bg_dnnMenu_hover.png');
	background-repeat:repeat-x;
}

#dnnMenu .topLevel .item.first {
	margin-left:-2px;
}

#dnnMenu .topLevel .item.first.selected {
	background-image:url('Images/bg_dnnMenu_hover.png');
	background-repeat:repeat-x;
	margin-left:-2px;
}

#dnnMenu .topLevel .item.selected a:hover {
	background-image:url('Images/bg_dnnMenu_hover.png');
	background-repeat:repeat-x;
}

http://uppix.net/c/b/f/7ed0e8e7086ac23da539eadf2b41btt.jpg

PS : j'ai du cacher des choses pour une histoire de confidentialité avec mon entreprise.

Bonjour,
le code commenté

#dnnMenu ul.topLevel li {
	display:inline-table; /*à supprimer*/
	float:left; /*float convertit de manière transparente la valeur du display à block (et table ici) > tu as une suite de table flottants > à supprimer car vertical-align ne s'applique pas au éléments de rendu block ou table*/
	width:98px;
	height:77px; /*à remplacer par line-height:77px pour centrage vertical d'une seule ligne*/
	list-style-type:none;
	text-align:center;
	font-size:11px;
	margin-top:17px;
       display:table-cell; /*ajouter*/
        vertical-align:middle;
}

	
#dnnMenu .topLevel li a {
	margin-top:auto; /*aucun effet ici*/
	margin-bottom:auto; /*aucun effet ici*/
	display:inline-block;
	height:97px; /*à supprimer pour le centrage*/
	width:98px;
	text-align:center;
	color:#ffffff;
}

Modifié par Hermann (11 Apr 2013 - 11:45)

Ceci peut-être

#dnnMenu .topLevel li a {
/*le code déjà tapé plus...*/
vertical-align: middle;
}

... je ne suis pas certain d'avoir juste pour l'élément ciblé, mais pour la propriété ça devrait aller.

Faudrait presque demander si la personne compte répondre avant de lui donner une réponse.