Центрирование изображения внутри навигационной панели

Question

Этот код отлично подходит для центрирования панели навигации, когда это просто текст. Горизонтально и вертикально.

Но когда я пытаюсь использовать изображение для дома (изображение дома) - он смещается и больше не центрируется по центру по вертикали.

.navt { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 
.navt li { 
 
    display: inline; 
 
} 
 
.navt a { 
 
    display: inline-block; 
 
    padding: 12px; 
 
    font-weight: normal; 
 
    color: white; 
 
} 
 
.navt li a:hover { 
 
    color: white; 
 
    background-color: pink; 
 
}

<ul class="navt"> 
 
    <li> 
 
    <a href="_index.cfm"> 
 
     <img src="../images/hm_wht_tr30.png" height="20" border="0"> 
 
    </a> 
 
    </li> 
 
    <li><a href="page.cfm">This</a> 
 
    </li> 
 
    <li><a href="page.cfm">And</a> 
 
    </li> 
 
    <li><a href="page.cfm">That</a> 
 
    </li> 
 
    <li><a href="page.cfm">Here</a> 
 
    </li> 
 
    <li><a href="page.cfm">There</a> 
 
    </li> 
 
</ul>

Answer 1

Если вы добавляете .navt img { vertical-align: middle; } вы делаете изображение выравнивания по вертикали относительно текста.

.navt { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 
.navt li { 
 
    display: inline; 
 
} 
 
.navt a { 
 
    display: inline-block; 
 
    padding: 0 12px; 
 
    font-weight: normal; 
 
    color: white; 
 
    height: 44px; 
 
    line-height: 44px; 
 
} 
 
.navt li a:hover { 
 
    color: white; 
 
    background-color: pink; 
 
} 
 
.navt img { 
 
    vertical-align: middle; 
 
}

<ul class="navt"> 
 
    <li> 
 
    <a href="_index.cfm"> 
 
     <img src="../images/hm_wht_tr30.png" height="20" border="0"> 
 
    </a> 
 
    </li> 
 
    <li><a href="page.cfm">This</a> 
 
    </li> 
 
    <li><a href="page.cfm">And</a> 
 
    </li> 
 
    <li><a href="page.cfm">That</a> 
 
    </li> 
 
    <li><a href="page.cfm">Here</a> 
 
    </li> 
 
    <li><a href="page.cfm">There</a> 
 
    </li> 
 
</ul>