Грамотное адаптивное выравнивание шапки сайта

[artishok]

Теперь необходимо выравнивание элементов по вертикали.

Для отображения текста по центру можно указать line-height равный height (8em в данном случае)

[CyberAP]

Тогда уж и white-space: nowrap; сразу указать, иначе если текста много вас ждёт не очень приятный эффект.

[ilusha_sergeevich]

Я тоже так думаю. Либо display: table и соответствующие элементы с vartical-align. А коль где-то там по семантике не подходит, то line-height. Зачем так замарачиваться, и пудрить самому же себе мозги с этими псевдо элементами…

[NekR]

jsbin.com/iginas/4/edit
Как то так. Костылей поменьше, да и текст не прыгает.

[NekR]

jsbin.com/iginas/6/edit

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

[FrimInc]

Не знаю как сейчас, но раньше inline-block в ИЕ не работал.

[FrimInc]

Ваша информация оказалась для меня полезной, спасибо.

[CyberAP]

Я бы с вами поспорил что понятнее — флоаты или инлайн-блоки.

[CyberAP]

Столкнулся с этим недавно, обнаружил у img внутри столбца max-width: 100%; и из-за этого картинка схлопывалась до нулевой ширины. Правда у соседнего столбца стояло width: 100%; что, собственно, и вызвало схлопывание столбца с картинкой.

[JustAMan]

Наверняка я чего-то не понимаю в современной вёртске, и вообще то, что я сейчас скажу, — ретроградство, но… таблицы? Не гораздо ли проще они, и выравнивают внутри ячеек всё по-человечески…

[JustAMan]

А можно чуть более развёрнуто? :)

[JustAMan]

Спасибо, будем посмотреть!

[Delka]

Пример выбран неудачный: логотип и пункты меню сайта в шапке — не должны зависеть друг от друга, поэтому верстаться должны через pos: abs;

[Delka]

На узком экране можно и нужно переопределить всё через media queries — это даст гораздо большую свободу действий, чем упование на то когда и как какой блок куда уйдет, особенно в условиях когда их много, а изменить дизайн нужно сильно.

[Delka]

Я считаю что те блоки что не зависят друг от друга по логике документа/макета, не должны зависеть друг от друга и в вёрстке.
Т.е. если лого у нас всегда слева в определённом месте, а меню — например справа в другом, то от смещения/перемещения одного из них, другой — не должен меняться.

[Delka]

Текст — это только текст. А меню — это логический блок, а не текст, имхо.

[Delka]

Поправьте меня если я ошибаюсь, но увеличить размер только шрифта, а не всего сайта можно только в FF при специально включенной галочке zoom text only. При условии что font-size у нас в px (что само-собой разумеется при верстке в АНБ).