2010-09-08 5 views
0

J'essaie de centrer verticalement le texte dans ma barre de menu. J'ai essayé d'éditer le HTML et le CSS, mais je n'ai pas eu de chance de le faire fonctionner.Centrer la cellule verticalement dans la barre de navigation

La page Web se trouve à l'adresse: http://www.xuanyinwen.com/test4.html
Le CSS est à l'adresse: http://www.xuanyinwen.com/css.css

Quelqu'un pourrait-il donner une idée, s'il vous plaît! Merci beaucoup!

+1

hey..vous avez beaucoup de question mais toujours pas accepté la réponse. s'il vous plaît cliquez sur la coche si une réponse utile pour vous. – klox

Répondre

0

changement .vertical li un à

.vertical li a{ 
border-color:-moz-use-text-color; 
border-right:1px solid; 
border-style:none solid solid; 
border-width:0 1px 1px; 
display:block; 
line-height:4em; 
padding:0.2em 10px; 
text-decoration:none; 
width:200px; 
text-align:center;} 
1

Au lieu de donner les éléments d'ancrage largeur et la hauteur (ce qui ne sert à rien de toute façon, parce qu'ils sont donnés display: block déjà), vous pouvez leur donner un rembourrage:

#menu li a { 
    padding: 1em 0; 
} 
+0

essayé, mais pas de travail, merci – xuanyinwen

1

Pour votre .vertical li une règle, ajouter:

line-height: 4em; 
vertical-align: middle; 
+0

Vous comprenez réellement comment 'vertical-align' fonctionne, non? Ce que 'vertical-align' fait est de changer l'alignement de l'élément en ligne par rapport à la boîte de ligne. L'ancre a déjà 'display: block' qui leur est appliqué, donc cette ligne est inutile. La propriété 'line-height' est tout ce qu'il faut pour que cela fonctionne. –

+0

Oui - force de l'habitude. Cela ne nuit pas, et ma solution fonctionne. – Jhong

Questions connexes