Почему изображение значка выравнивается по верху контейнера? (ссылки на веб-страницу)

Question

У меня слишком много проблем с выяснением, почему значок на моем веб-сайте не выровнен, как на других страницах, использующих тот же CSS и исходные файлы.

Вот как это странно ведет себяво всех браузерах: http://igpmanager.com/account Значок «home» (верхний левый угол под логотипом веб-сайта) по какой-то причине выровнен по верху его контейнера.

И все же он использует тот же HTML/ Исходный код CSS (насколько я могу судить) с этой страницы: http://igpmanager.com. Тем не менее, тот же значок на этой странице выровнен по середине его контейнера.Здесь я хочу, чтобы он также был в URL-адресе / account.

Что вызывает это?Я довольно тщательно искал ответ, но мне не повезло найти его.

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