为什么图标图像对齐到容器的顶部?(连结至网页)

Question

我有太多的麻烦弄清楚为什么一个图标在我的网站上没有对齐，因为它是在使用相同的CSS和源文件的其他页面。

它在所有浏览器中的行为都很奇怪:http://igpmanager.com/account"home"的图标(网站徽标左上角)由于某种原因与它的容器顶部对齐。

然而，它与这个页面共享完全相同的HTML/CSS源代码(据我所知):http://igpmanager.com。然而，这个页面上的相同图标却与容器的中间对齐。这是我希望它在/帐户URL也。

是什么原因造成的?

Answer 1

实际上，所有的东西都是上对齐的，文字之所以会下降是因为你设置了

#nav a, #nav a:visited, #nav a:active {
...
line-height: 26px;
...
}

将文本向下推，但行高对图像定位没有影响。您最好删除line-height声明并添加padding-top，并减少元素的高度以补偿

#nav a, #nav a:visited, #nav a:active {
    display: block;
    background-color: #33383F;
    color: #B3B6BF;
    height: 18px;
    padding: 4px 12px;
    text-decoration: none;
    font-weight: normal;
    border: 1px solid #4D545F;
    border-bottom: none;
    border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    word-wrap: break-word;
}