CSS Nav Menu Text rare behaviour in size thats aligned bottom some how

The page in question is at the following address:

http://richiesportfolio.com/temp-site-tester/index.html

As you can see the images align to the top of the nav menu but if I put text in the link the text becomes the height of the nav menu and aligns to the bottom. I have no idea how this is happening.

Here is some of the CSS the rest you can just 开发者_运维百科view the page source of the link I gave you.

body, html { background: #e6f3f7; text-align: center; height: 100%; font-face:Verdana, Geneva, sans-serif; }

#page_wrapper {
    background: url(images/bg_slice.jpg) repeat-x #e6f3f7;
}
.page {
    margin:0 auto;
    width: 1000px;
    overflow: hidden;
    padding-bottom: 35px;
}
#page {
    background: url(images/header.jpg) no-repeat #e6f3f7;
    overflow: hidden;
}

#nav {
    height: 55px;
    margin-top: 150px;
    list-style: none;
}

#nav li{
    display: inline;    
}

#nav li img {
    margin:0 10px;
}

#nav li a {
    font-size: 24px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top:0px;
    color: #fff;
}

#nav li.current a {

}


#nav li a:hover {

}

span {
    font-family: Myriad Pro;
    font-weight: bold;
    margin-top:0;
}

h1 { margin: 35px;
     color:#022c4d;
}

p { margin-left:35px;
    color:#6492a3;}

#content {
     margin: 150px auto;
}

#column1 {
    float:left;
    width:650px;
    background: url(images/content_bg.png);
    height:650px;
    text-align:left;


}

#column2 {
    float:left;
    width:277px;
    margin-left:50px;


    }

I'ts the #nav li and its display: inline;

I would suggest you look at this.. this is a good way of centering your menu. ( in most cases.. )

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support