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

Question

[Гриша Никольский]

Привет, мне нужно сверстать такой хедер:

Да так, чтобы в мобильной версии он отображался так (при помощи bootstrap и медиа-запросов)(можно "start" по центру разместить):


Проблема состоит в том, что нужно сделать горизонтальное выравнивание сначала всего блока, а потом "start" уже относительно этого блока. Как лучше это сделать?

Заранее спасибо за ответы!

Answer 1

[Сергей Горячев]

Честно говоря, вопрос крайне простой.

Вариант 1 - через абсолютное позиционирование.

Вариант 2 - блок "Welcome... director" обернуть в див и "Start" тоже в див.
А их уже позиционировать через flexbox.
https://jsfiddle.net/webirus/zkaemfb7/

Я бы выбрал второй вариант, хотя и абсолют тут будет уместен.

Comments

[Гриша Никольский]

Вы предлагаете в 1 варианте обернуть "Welcome... director" в див и позиционировать его абсолютно, а потом "Start" обернуть в див и позционировать абсолютно?

[Сергей Горячев]

Гриша Никольский: обернуть "Welcome... director" в релативный див и относительно него абсолютно позиционировать "Start"

[Сергей Горячев]

Гриша Никольский: https://jsfiddle.net/webirus/zkaemfb7/ но я бы сделал через флексы. Это удобней.

[Гриша Никольский]

Sergey Goryachev: конечно удобней, только вот о поддержке IE можно забыть... А заказчики нынче очень любят полную кроссбраузерность

[Сергей Горячев]

Гриша Никольский: 10-11 версия и edge поддерживается полностью. Доля IE на рынке 5%, из них еще 5% приходится на <10 версии.

[Сергей Горячев]

Гриша Никольский: Ну, если хотите еще поддержку IE 6, то выше вам также подсказали display: table-cell и vertical-align: middle. Тоже отличное решение. Правда геморройное по большей части.

[Гриша Никольский]

Sergey Goryachev: А я думал, что только Edge. Выходит, не применял такую полезную вещь, как flexbox просто по недосмотру таблицы поддержки бразуеров... Спасибо!

[Сергей Горячев]

Гриша Никольский: caniuse.com/#search=flexbox разверните Show all, увидите поддержку IE 10-11, если не используете препроцессоры, то префикс -ms- добавляйте руками. А в остальном, полная поддержка :)

Answer 2

[dom1n1k]

Решение: выкинуть отсюда нахрен бутстрап и сверстать эти несчастные несколько строк текста самостоятельно. Потребуется с полдюжины элементов/классов и 1-2 медиа-запроса.

Comments

[Гриша Никольский]

Ок, а что лучше использовать для центрирования в этом случае? Способ с абсолютным позиционированием тут больше навредит, чем поможет, как по мне.

[dom1n1k]

Наиболее напрашиваются два варианта:
- display: table-cell + vertical-align: middle;
- flexbox

[Сергей Горячев]

Больше всего меня смешит, когда люди пытаются бутстрап применить там, где он нахрен не нужен))) PS: Вообще его не использую. Просто принцип у меня такой :)

Answer 3

[65536]

Если что, вот название женщины: siri tollerod

Comments

[Сергей Горячев]

Весьма эпатажная барышня, кстати)