Выравнивание горизонтального меню по центру

[rodion7195]

Доброго времени суток,
Хотел бы обратиться за помощью, так как ответа на просторах интернета найти не смог.
Проблема: есть горизонтальное меню. Состоит из 4 пунктов. После второго пункта идет логотип. Все выравнено по центру. Но так как первые два пункта меню длиннее, чем последние два, логотип находится не по центру.
Вопрос: как поместить логотип ровно по центру, сохраняя выравнивание пунктов меню по центру?

[radioactive]

https://jsfiddle.net/dg19qo4n/

[radioactive]

Изменить пункт "блог" на например "блог магазина"
Или установить ширину всем пунктам меню равную самому длинному

[rodion7195]

27 минут назад, radioactive сказал:

Изменить пункт "блог" на например "блог магазина"
Или установить ширину всем пунктам меню равную самому длинному

Тогда адаптивности не будет, пункт "новая коллекция" может в дальнейшем смениться. Да и все равно не идеально по центру логотип будет. А как установить фиксированную ширину пунктам меню?

Код меню стандартный:

<nav>
<ul class="clearfix">
<li><a href="#new">Новая коллекция</a></li>
<li><a href="#shop">Онлайн бутик</a></li>
<img src="img/logo.png" height="85px" align="bottom" alt="Логотип">
<li><a href="#blog">Блог</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>

 

[Igor Schnaider]

Да просто разбейте меню на две части: одна — слева, другая — справа. Каждая займет 50% ширины родителя с небольшими отступами от центра, чтобы на логотип не налезали. Сам логотип по центру абсолютно спозиционируйте.

[rodion7195]

2 часа назад, Igor Schnaider сказал:

Да просто разбейте меню на две части: одна — слева, другая — справа. Каждая займет 50% ширины родителя с небольшими отступами от центра, чтобы на логотип не налезали. Сам логотип по центру абсолютно спозиционируйте.

Вы не могли бы помочь с реализацией? Просто я уже пробовал это провернуть...

<nav>
<ul class="clearfix">
<li><a href="#new">Новая коллекция</a></li>
<li><a href="#shop">Онлайн бутик</a></li>
<img src="img/logo.png" height="85px" align="bottom" alt="Логотип">
<li><a href="#blog">Блог</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>

nav { left:0; width: 100%; height: 100px; position: fixed; z-index:100; background: linear-gradient(to top, #111, #232323); text-align:center;}
header ul li { padding-top: 20px; list-style: none; display: inline; text-transform: uppercase; letter-spacing: 2px; padding: 0px 20px;}

 

[rodion7195]

1 час назад, radioactive сказал:

https://jsfiddle.net/dg19qo4n/

Огромное вам спасибо!