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

Question

[blindtownblues]

Здравствуйте. Как лучше всего сверстать горизонтальное меню из 4 пунктов, между 2 и 3 пунктом которого проходит изображение (см. фото)? И какой способ лучше всего подойдет, чтобы выровнять по центру данное меню? Спасибо.

Comments

[Сергей delphinpro]

В идеальном мире верстальщика это было бы примерно так
https://codepen.io/SelenIT/pen/PZaxoK

[Сергей delphinpro]

Смотреть в FireFox нужно =)

[AlikDex]

Сергей: Это шутка? )

[Islam Ibakaev]

Сергей: а нельзя ли как-то так (на основе вашего примера)?

[Сергей delphinpro]

Islam Ibakaev: Можно, но семантика, мать ее, страдает =)

[Сергей delphinpro]

AlikDex: Да какие тут шутки. Это скорбь от медленно развивающихся полезный вещей.

[AlikDex]

Сергей: не кросс браузерно, завязано на теги и слова про "идеальный мир верстальщика" :D
Звучит как злая шутка ))

[Сергей delphinpro]

AlikDex:

завязано на теги

Это не мой пример. Да и суть не в том.
Это демонстрация свойства display: contents

Answer 1

[Андрей Прозоров]

1)
флексбокс c выравниванием контента
2)
height: 100px;
line-heigth:100px;
vertical-align: middle;

первый способ менее кроссбраузерный. второй работает везде но вы привязаны к пикселям (высота должна быть чекто задана )

Comments

[Олег]

Вот подскажите. Это мода такая на флексы? Суют уже везде. Где надо и где не надо. Нах меню флексом верстать?

[Иван]

Олег: А что,прикажете на флоатах верстать?Флексы были созданы для такого,остальное всего лишь хаки

[Андрей Прозоров]

Олег: ну во первых нах везде совать свой мат? вы можете так разговаривать например с водителями маршуроток. пожалуйста пройдите к ним на форум!
во вторых по существу вопроса. все просто. флекс это удобно в плане взаимодействия элементов, в чем и есть суть проблемы. во вторых я дал это как вариант по сути более красивого решения чем любой другой. по тому как любой другой вариант основан на установке элементам общих харакетриситк. и только флекс основан на реальном взаимодействии блоков

[Олег]

Иван: Для такого??????????????????
Это типа на мобильном открываешь и тебе в репу сразу меню на весь экран. Для чего?

[Андрей Прозоров]

Олег: разговоры верстальщика низкого уровня. ЗАЧЕМ ВЕРСТАТЬ НА НОВЫХ ХОРОШИХ ТЕХНОЛОГИЯХ ЕСЛИ ЕСТЬ СТАРЫЕ ПРОВЕРННЫЕ И ГОВНЯНЫЕ НО ЗАТО ПРИВЫЧНЫЕ???

[Андрей Прозоров]

Иван: тут флоат (в данной ситуации) не совсем уместен. алджин жустифи.

[Андрей Прозоров]

есть еще вариант display: table-cell; но он породит массу проблем.

[Олег]

Андрей Прозоров: Я не о привычных... А правильных решениях! Flex, да новая, но не все решающая. а на счет уровня не вам судить. Если в школе показали, что такое флекс, а не показали других решений, то не стоит судить, что говняное. Лучше осознай, что правильнее будет в данной конкретной ситуации. Опыта более 13 лет!

[Андрей Прозоров]

Олег: недостаток (в данной ситуации) у флекса только один. кроссбраузерность.

[Андрей Прозоров]

Олег: какой ваш вариант? а то судить горазд. а предложить что то?

[Kovalsky]

Андрей Прозоров: и то не такой уж и недостаток - в данный момент поддержка 98%

И кстати флекс совсем не новый.

[Олег]

Андрей Прозоров: Я не судить, между прочим. Я не бог и не судья ;) А всего лишь хотел узнать, почему флекс там, где он фактически не нужен. Кстати был вопрос по флексу Flexbox vs float? Топовый ответ самый грамотный ;)

[Андрей Прозоров]

Олег: флексбокс нужен там где есть взаимодейтсвия блоков. флоат не дает возможностей описывать взаимодействие блоков. а лишь запихнуть один блок в след за другим. и следом за этим если что то нужно сделать пошли разные ухищрения. флекс придуман чтобы не делать ухищрения

[Kovalsky]

Олег: если вы хотите узнать почему флекс там где он фактически не нужен - обратитесь к вопросу на который вы сами дали ссылку, там это также подробно расписано. К тому же в рамках технического форума использовать фразы типа "правильнее" и "опыта более 13 лет" немного некорректно, хотя бы потому что и среди опытных есть люди, мягко говоря, не очень сообразительные.

И небольшой сюрприз в студию - бутстрап уже переехал на flexbox.

Думаю тема исчерпана, если конечно не хотите схватить с десяток репортов за троллинг.

[Андрей Прозоров]

Никита Полевой: по опыту эти 2% мои заказчики(((( так что флексами пользуюсь редко и только с поддержкой безфлексовых браузерах. а именно это две ситуации 1) выравнивание блоков по высоте. как в этом вопросе. но учитывая легксоть ситуации я бы все же задал фикисорованную высоту. 2) ситуация когда надо с враппингом вывести список и сдлеать space-beetwin / space-around.

в остальных случаях бустрап на флоатах

[Сергей delphinpro]

Олег:

Вот подскажите. Это мода такая на флексы?

Подскажу.
Flexbox это первая (!) технология созданная за более чем 20 лет существования css специально для раскладки блоков. До нее были исключительно "хаки", если подходить к вопросу формально. Следующий шаг в этом направлении - Grid layout, который уже, кстати, неплохо поддерживается на сегодняшний день, и в определенных условиях может использоваться.
Так вы спрашиваете, зачем использовать технологии по их прямому назначению? Вопрос как минимум вызывает улыбку. Ответ прост как апельсин - потому что они для этого созданы.

[Islam Ibakaev]

Сергей: Согласен! Использование флоатов для раскладки блоков (не по назначению) - это чистейший хак! То есть, задача реализуется некорректным способом! Просто удивительно, что в течении 20 лет не было написано конкретного и корректного решения этой задачи. И, слава богу, наконец-то, занялись этой проблемой.

[Ranwise]

Flexboxам в 2018 стукнет 10 лет как их обсуждают\внедряют

[Андрей Прозоров]

Ranwise: не забывайте что есть display: flexbox а есть например flexbox order или shrink или grow которые несколько моложе и их поддержка куда хуже. а есть еще нюансы. к примеру я заметил что на сафари < 10 флекс не работает если не задать display: inline-block; элементам. а это все айфоны кроме последнего самого. так что все не так просто. циферки 98% красивые. на практике все не так просто