Problème de centrage vertical

Bonjour à tous,

j'essaye tant bien que mal d'obtenir un résultat visuel satisfaisant quant à l'alignement vertical d'éléments de menu.

Un menu horizontal simple:

<div id="menu">
<ul><li><a href="#">Home</a></li><li><a href="#">Bibliographie</a></li><li><a href="#">C.V.</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul>
</div>

CSS:
body,html{
margin:0;
padding:0;
}

#container{
margin:auto;
width:1000px;
}


#menu ul li{
margin:0;
padding:0;
display:inline-block;
width:200px;	
}

#menu ul{
list-style-type:none;
margin:0;
padding:0;
vertical-align: middle;	
}

#menu{
font-size:12px;
text-align:center;
width:1000px;
height:20px;
}

#menu a{display:block; width:200px; height:20px; color:rgb(225,225,225); text-decoration:none; background-image:url('M/bckg_menu_1.jpg');}
#menu a:hover {color:rgb(99,99,99); background-image:url('M/bckg_menu_2.jpg');}
#menu a:visited {color:rgb(0,0,0); background-image:url('M/bckg_menu_2.jpg');}

Mon problème est le suivant:
je devrais centrer verticalement le texte par rapport à mes images de fond(rollover). Quelle serait la méthode la plus adaptée. L'ensemble des éléments étant contenu dans la liste, comment bouger le texte indépendamment de l'image?

En pièce jointe le résultat que j'aimerais obtenir en image.


Merci
Modifié par ludo1kenobi (13 Dec 2011 - 16:04)

J'ai du mal à suivre : pourquoi bouger le texte ?
Dans le code que tu montres, tu changes uniquement l'image de fond au :hover. Pour centrer ton image de fond, il suffit d'employer background-position.

Est-ce le sens de ta question, et une réponse utile..?

Je comprends un peu mieux : à priori, si tu ajoutes un

line-height:20px

tu devrais te rapprocher du résultat escompté.

Est-ce bon ?

Merci Ten,

je viens de poster une image qui devrait mieux illustrer mes propos.
Je voudrais juste optimiser le centrage vertical du texte par rapport à une hauteur de 20px (hauteur de ma div #menu)

Je vais tenter pour le line-height, je te tiens au courant du résultat

Nickel!!!
Merci!!!
mais pourrais-tu m'aiguiller sur les propriétés de line-height, comment se fait-il que l'alignement vertical se fasse automatiquement? Est-ce un style qui porte uniquement sur du texte?

Bonjour,

line-height a deux caractéristiques:

-la première est définir la hauteur d'une ligne de texte (remarque: si tu définit un line-height à 20px et que ton texte tient sur deux lignes, il fera 40px de hauteur).
-la seconde est de centrer verticalement le texte sur la hauteur de la ligne (c'est pour çà que çà marche dans ton cas).

Oui effectivement, cela gère l'interlignage ( traduction littérale ).

Tu peux t'amuser à teste sur un paragraphe diverses valeurs afin de voir comment line-height affecte un bloc de texte.

Dans ton cas, lorsqu'un texte est sur une seule ligne et contenu dans un élément plus haut que lui, il conserve son line-height hérité. Il peut donc être trop haut ou trop bas, suivant les cas.

Lorsque ledit conteneur à une hauteur fixe - ici 20px - on précise un line-height identique à la hauteur, afin que l'alignement de la ligne de texte soit cohérente avec la hauteur du conteneur.

J'espère avoir été assez précis. Tu peux faire une recherche sur Google afin d'approfondir tout ça !

Encore merci à tous, super clair!!!
je continue mes recherches