Alignement vertical dans un div

bonjour,
j'aimerais faire un menu sous forme de gros carré de couelur et du coup centrer le texte (qui peut être sur plusieurs lignes) horizontal et surtout vertical . En plus au sur vol le carré aura un fd blanc avec une bordure de 1px.
J'ai trouvé un article sur alsacreation (http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html#cv_image) qui m'a bien aidé mais je rencontre des pb sur IE (biensûr !!!) et au survol. Quand je survole le texte il décale le fond.
Si vous aviez un peu de temps pour moi merci.
Voici le code CSS :

.menu_partie{
	float: left;
	background: #d4006a;
	color:#FFF;
	font-size: 14pt;
	text-align: center;
	height: 130px;
	width: 130px;
	padding: 20px;
	margin: 1px;
	line-height: 130px;
	}

.menu_partie p { 
	border:1px solid #fff;
	vertical-align:middle;
	display:inline-block;
	line-height:1.2; /* on rétablit le line-height */
	text-align: center; /* ... et l'alignement du texte*/

}

.menu_partie a{
	color: #fff;
	text-decoration:none;
	}
	
.menu_partie a:hover{
	float: left;
	border:1px solid #d4006a;
	background:#FFF;
	color:#d4006a;
	font-size: 14pt;
	text-align: center;
	height: 128px;
	width: 128px;
	padding: 20px;
	margin: 20px;
	line-height: 128px;
	}

.menu_partie p a:hover { 
	border:1px solid #d4006a;
	background:#FFF;
	display:inline-block;
	line-height:1.2; /* on rétablit le line-height 
	text-align: center; /* ... et l'alignement du texte*/

}

Et voici le html :

<div class="menu_partie"><p><span><a href="#">Menu 1 sur 2 lignes voir 3</a></span></p></div>
    	  <div class="menu_partie"><p><span><a href="#">Menu 2 sur 2 lignes </a></span></p></div>
    	  <div class="menu_partie"><p><span><a href="#">Menu 3</a></span></p></div>
    	  <div class="menu_partie"><p><span><a href="#">Menu 4</a></span></p></div>
    	  <div class="menu_partie"><p><span><a href="#">Menu 5</a></span></p></div>
    	  <div class="menu_partie"><p><span><a href="#">Menu6</a></span></p></div>

Voilà voilà
En vous remerciant.
Modifié par 6l20 (15 Jul 2013 - 17:50)

Hello,

Comme ceci éventuellement ?

C'est exactement ça.
J'ai essayé de refaire ce que vous aviez fait mais rien ne se passe.
Le texte reste centré et vertical sans aucune mise en forme.
En fait ce menu va se trouver imbriqué dans plusieur div je me demande si cela ne géné pas et du coup empeche la mise en forme.
De plus pour les version antérieur a ie9 et 10 tab cell est compris ?
Merci

Bonjour,

Table-cell est, a priori, bien interprété dès IE8
Pour les versions antérieures, j'aurai tendance à dire "osef"...

Cependant, ceci devrait peut-être pouvoir corriger le tir sur les versions IE<8 :

li {
	display:inline;
	zoom:1;
	display: inline-block;
}

Ou mieux via un commentaire conditionnel :

<!--[if lte IE 7]> <link type="text/css" rel="stylesheet" href="styles-ie.css" /> <![endif]-->

et dans ta feuille de style styles-ie.css :

li {
	display:inline;
	zoom:1;
}

Concernant les autres soucis rencontrés, le mieux reste de nous fournir une adresse où l'on va pouvoir regarder de quoi il retourne.

Bon courage.

Re bonjour,
je me suis dit que ça venait certain du fait que j'avais des pb d'héritage dans ma page du coup je suis repartie avec votre code et sur une page vierge.
Le résultat d'affichage était ok sur firefox et chrome ms pas sur opéra et ie ( bizare !!!).
alors quesi je vais visualiser votre lien tout est ok -> à rien y comprendre.
du coup j'ai contournai le pb comme suit :
code CSS :

.menu a {
    background-color: #d4006a;
	font-family: "Century Gothic";
	text-align: center;
    color: #FFF;
	text-decoration:none;
	font-size: 12pt;
	line-height: 30px;
	padding-top: 30px;
	height: 100px;
	width: 130px;
	float: left;
	margin: 1px;
	border:1px solid #d4006a;
}

.menu a:hover {
	background-color: #fff; /* alternative solide */
	color: #d4006a;
}

Code HTML :

<div class="menu"><a href="#">Menu 1 sur 2 lignes, voire 3 lignes...</a></div>
    <div  class="menu"><a href="#">Menu 2 sur 2 lignes éventuellement</a></div>
    <div  class="menu"><a href="#">Menu 3</a></div>
    <div class="menu"><a  href="#">Menu 4</a></div>
    <div class="menu"><a  href="#">Menu 5</a></div> 

Et là l'affichage est ok sur tous les navigateurs.
Qu'en pensez-vous ? Est-ce une solution acceptable ?

Merci
Modifié par miniwanadoo (17 Jul 2013 - 15:51)

Bonsoir,

Nous n'avons pas connaissance du contexte, ni du Doctype choisi, ni de la finalité de ton site....
Nous manquons donc singulièrement d'informations qui nous permettraient de t'aiguiller convenablement, ou en tout cas, de manière plus efficace.
Concernant les menus, il est d'usage d'utiliser une liste ordonnées (ou non), et HTML5 offre de nouvelles balises permettant de donner davantage de sens au blocs structurants.
Concernant ton "menu", que dire de plus ? S'il fonctionne et que cela te convient, roulez jeunesse