Center cell vertically in the navi bar

Question

Hi there,

I am trying to center vertically the text in my menu bar. I have tried editing the HTML and CSS, but had no luck making it work.

The webpage is located at: http://www.xuanyinwen.com/test4.html
The CSS is at: http://www.xuanyinwen.com/css.css

Could anyone give some idea, please! Many thanks!

Answer 1

Instead of giving the anchor elements specific width and height (which is useless anyway, because they are given display: block already), you can give them a padding:

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

Answer 2

To your .vertical li a rule, add:

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

Answer 3

change .vertical li a to

.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;}