Alignement vertical dans un bloc ???[Résolu]

Bonjour,
Sur un menu de navigation utilisant 2 images dans un seul fichier , le texte des liens dans les <li> se positionne bien au centre...mais en haut du bloc; j'ai essayé avec la propriété "vertical-align"...même chose.
Or je souhaiterai que ce texte soit bien aligné horizontalement ET verticalement dans la balise. Bien sûr avec "padding" ou "margin", apparaît alors à l'écran la 2eme partie du fichier image...Quelle serait donc la (ou les) solutions?
voici ma css :

ul, li{
	list-style-type:none;
	margin: 0;
	padding: 0;
}
ul{
	position: absolute;
	left: 125px;
	top: 85px;
	background: transparent url(imag/navstyl.jpg) top left no-repeat;
	height: 75px;
	width: 650px;
	text-align: center;
}

li{
	float: left;
}
li a{
	display: block;
	height: 75px;
	width: 90px;
	font-family: "Trebuchet MS", Verdana, "Lucida Sans", Tahoma, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #FFFFFF;
}
li a:hover{
	color: #CCCCCC;
	background: transparent url(imag/navstyl.jpg) top left no-repeat;
}
a#lien1:hover{
	background-position: 0px -75px;
}
a#lien2:hover{
	background-position: -90px -75px;
}
a#lien3:hover{
	background-position: -180px -75px;
}
a#lien4:hover{
	background-position: -270px -75px;
}
a#lien5:hover{
	background-position: -360px -75px;
}
a#lien6:hover{
	background-position: -450px -75px;
}
a#lien7:hover{
	background-position: -540px -75px;
}

D'avance merci de votre aide.

Bonjour,

Tu as, dans les tutoriels d'Alsacréations, un tutoriel récemment mis à jour sur la construction de menus simples en CSS. Si tu regardes la partie concernant le menu graphique, tu constateras qu'elle utilise des padding pour dimensionner les items de menu en hauteur. Cela donne une impression de centrage vertical (écart entre le texte et les bords identique en haut et en bas), permet le redimensionnement du texte, etc.

boro64 a écrit :
Bien sûr avec "padding" ou "margin", apparaît alors à l'écran la 2eme partie du fichier image...

Tu as utilisé la méthode des portes coulissantes pour faire un rollover ? Si c'est le cas, tu peux t'inspirer du tutoriel cité ci-dessus, qui propose une version extensible en hauteur.

Enfin, je rappelle que la FAQ du forum propose des réponses et des pistes de solutions pour la plupart des questions courantes, dont celle du centrage vertical... Les solutions qui y sont abordées me semblent moins intéressantes que la simple utilisation des padding, mais si on doit y avoir recours, on pourra consulter la FAQ.

Bonjour,

Faire la même chose avec un inoffensif tableau de présentation (summary vide, pas de caption, de thead, de th, etc) s'il faut absolument régler ce problème de centrage vertical, et s'empresser de fermer ce sujet. C'est une broutille

Merci...je ferme et la ferme...merci quand même pour les pistes Florent. Effectivement c'est une broutille Maître Laurent...quand on n'a pas à faire au client et que l'on ne voit pas le résultat, qui effectivement necessite un alignement vertical
Bonne journée tout de même...
Tchô
Modifié par boro64 (16 Jan 2007 - 13:42)

Je pense que Laurent voulait juste dire qu'il est inutile et peu productif de se casser la tête sur des techniques de centrage vertical, quand il suffirait d'employer un simple tableau de mise en forme.

Pour rappel : les tableaux de mise en forme ne sont pas synonymes d'inaccessibilité, à partir du moment où on évite :
- les cellules vides ;
- l'imbrication excessive (tableaux dans des tableaux).
Une autre contrainte étant que la lecture linéaire (ligne par ligne, puis cellule par cellule) soit cohérente.

Florent V. a écrit :
Je pense que Laurent voulait juste dire qu'il est inutile et peu productif de se casser la tête sur des techniques de centrage vertical, quand il suffirait d'employer un simple tableau de mise en forme.

Oui.