Как лучше всего сверстать такой блок?

252

03 декабря 2017, 11:49

Как лучше всего сверстать данный блок? Он находиться на стыке первой секции и второй. Пробовал задать секции position:relative, блоку абсолют, но тогда появляется проблема с центрированием, + значение max-width не работает для этого блока в таком случаи, и приходиться задавать фиксированную ширину, в процентах тоже нельзя, т.к. опять же абсолют. В общем вопрос, как сделать этот блок, что бы он имел относительную ширину и что бы он всегда находился по центру на любых экранах?

Answer 1

Такой вариант тебя устроит? https://jsfiddle.net/och4zcfm/

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

Есть один момент - в моем примере я знаю ширину центрального блока. Если она неизвестна- надо добавить еще один блок, внутрь которого разместить центральный блок и добавить свойство text-align: center и display: inline-block

https://jsfiddle.net/och4zcfm/1/