Добавление логотипа img приводит к смещению inline-block элемента вниз

[twelve_chairs]

Здравствуйте,

Ссылка на проблему https://jsfiddle.net/gzemlyakov/wkzgfj2h/

Столкнулся с проблемой позиционирования inline-block элемента(nav) после логотипа(img). При добавлении inline-block элемента после картинки, элемент съезжает вниз на расстояние, приблизительно равное, высоте картинки. Если убрать картинку и добавить еще один inline block элемент, то смещения вниз не происходит. Я попробовал выставить display: inline-block, также, для картинки, но это не помогло решить проблему. Если вместо img поместить другой inline элемент, например span, смещения вниз не происходит. Основной вопрос как позиционируется img и чем его позиционирование отличается от остальных inline элементов, что приводит к такому эффекту?

На данный момент нашел два возможных решения:

1. Добавить картинку в качестве первого пункта li списка ul. Это приводит к смещению вниз остальных пунктов li списка, следующих за картинкой. https://jsfiddle.net/gzemlyakov/d0ttbxwo/
2. Добавить float: left для картинки. Видимых недостатков не обнаружил, но возник вопрос: насколько совмещение inline-block элементов и свойства float: left соответствует лучшим практикам верстки? Во многих статьях, которых я видел, float и display: inline-block рассматриваются как отдельные подходы к расположение элементов

Что я хочу добиться, это горизонтальная навигационная панель, построенная с помощью элементов ul и li. Пункты li должны занимать 100% высоты от родительского элемента, при этом родительский элемент занимают фиксированную высоту. Перед навигационной панелью хочу поместить логотип. Логотип, а также текст в пунктах навигационной панель, хочу вертикально центрировать. 

Спасибо!

[twelve_chairs]

Решил проблему добавлением свойства vertical-align: middle для картинки и inline-block элемента