CSS 导航菜单文本在大小方面罕见的行为，如何与底部对齐

Question

有问题的页面位于以下地址：

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

正如您所看到的，图像与导航菜单的顶部对齐，但如果我将文本放入链接中，文本将变为导航菜单的高度并与底部对齐。我不知道这是怎么发生的。

这是一些 CSS，其余的你可以查看我给你的链接的页面源代码。

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;


    }

Answer 1

我是 #nav li 及其 display: inline;

我建议您看看这个..这是使菜单居中的好方法。 （在大多数情况下..）

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