twelve_chairs

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

Здравствуйте, Ссылка на проблему https://jsfiddle.net/gzemlyakov/wkzgfj2h/ Столкнулся с проблемой позиционирования inline-block элемента(nav) после логотипа(img). При добавлении inline-block элемента после картинки, элемент съезжает вниз на расстояние, приблизительно равное, высоте картинки. Если убрать картинку и добавить еще один inline block элемент, то смещения вниз не происходит. Я попробовал выставить display: inline-block, также, для картинки, но это не помогло решить проблему. Если вместо img поместить другой inline элемент, например span, смещения вниз не происходит. Основной вопрос как позиционируется img и чем его позиционирование отличается от остальных inline элементов, что приводит к такому эффекту? На данный момент нашел два возможных решения: Добавить картинку в качестве первого пункта li списка ul. Это приводит к смещению вниз остальных пунктов li списка, следующих за картинкой. https://jsfiddle.net/gzemlyakov/d0ttbxwo/ Добавить float: left для картинки. Видимых недостатков не обнаружил, но возник вопрос: насколько совмещение inline-block элементов и свойства float: left соответствует лучшим практикам верстки? Во многих статьях, которых я видел, float и display: inline-block рассматриваются как отдельные подходы к расположение элементов Что я хочу добиться, это горизонтальная навигационная панель, построенная с помощью элементов ul и li. Пункты li должны занимать 100% высоты от родительского элемента, при этом родительский элемент занимают фиксированную высоту. Перед навигационной панелью хочу поместить логотип. Логотип, а также текст в пунктах навигационной панель, хочу вертикально центрировать. Спасибо!