Как отцентрировать по горизонтали несимметричное меню?

Question

[Severn101]

Всем привет. Практикуюсь в верстке и хотел бы узнать, как лучше отцентрировать горизонтальное меню относительно имеющегося у него центрального элемента.

Шаблон:


Нужно отцентрировать меню по логотипу. При этом отступы между пунктами меню должны быть одинаковыми, а сами имена пунктов могут быть разной длинны. То, что свободное пространство слева и справа от меню будет отличаться, не страшно.

Вот моя реализация: https://jsfiddle.net/s073sr9b/

Я разделил шапку на "Логотип", "Левое меню" и "Правое меню", каждый из которых абсолютно спозиционирован.
Пытался решить вопрос флексбоксами, но т.к. Правое и Левое меню разной длины, то все Меню центрируется не верно.
Можно как-то более правильно сверстать? Без абсолютного позиционирования?

Answer 1

[Полина Емельянова]

Попробуйте всеже с ФБоксами
https://codepen.io/emelyanova/full/zwbJPK/ - фулскрин.))
flex: 1; для правой и левой части.)))

НЕ ПРЕТЕНДУЮ!!!! НО сама бы реализовала именно так.

*в настройках пена стоит автопрефиксер!

Comments

[Severn101]

Спасибо, Полина, очень помогли. Вы только не учли требование, что расстояние между пунктами меню должны быть одинаковы.
Поправил ваше решение:
https://codepen.io/anon/pen/VbREmq

Answer 2

[Anton fon Faust]

можно.. и даже без флексбоксов.
https://jsfiddle.net/anton4ept/84L2a4f5/

Comments

[Severn101]

У вас в верстке осталась проблема, которую мне нужно решить. Если названия пунктов меню будут сильно отличаться по длине, то логотип не будет располагаться по середине страницы. Вот демонстрация:
https://jsfiddle.net/td3xqw4p/

[Anton fon Faust]

Severn101: min-width в помощь)