Задать вопрос
masimore
@masimore

Резиновый шаблон сайта, контент по середине страницы?

Ребята помогите в верстке есть такой вот шаблон тот что верстаю как сделать чтоб было как скриншоте чтоб контент в шапке и в навигации был по середине? идею взял тут 6f26652c53064d19be6c34c252df2c97.png
  • Вопрос задан
  • 345 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
ширина родительский контейнера 100%, а дочерним указываете width: 100% и max-width в стиле.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
alvvi
@alvvi
export default apathy;
Обычная комбинация max-width и margin: auto.
Ответ написан
@AntowaKartowa
Если я правильно понял вопрос как вертикально выровнять? С чего ж начать.
1. Наверное с того, что это вроде не контент а скорее какой-то заголовок и короткое описание на фоне бигборда. Оцентровать то походу не относительно всего окна нужно (выйдет кака при уменьшении окна) а относительно бигборда. А в верстке никакой разметки для бигборда и накаких размеров дня него в стилях нет. А значит нет основы относительно которой выравнивать нужно.

2. Бигборд видимо должен занимать всю доступную высоту и не меньше какой-то минимальной высоты. Есть способы как этого добиться по старинке, но там сложные танцы с дисплей тейбл и множественное оборачивание в дивы. Может есть другой олдовый способ, но я его не знаю. Наиболее простой способ для этого испльзовать flex-box.

Я забрал враппер. С флексбоксом он не нужен. Убрал ненужные флоты. Вместо них есть инлайн-блоки. Для центрования контента добавил отдельный класс контейнер. Для центрируемого вертикально текста добавил текст-блок. Он находиться внутри контейнера и может горизонтально выравниваться относительно него через margin-left или через margin: 0 auto.
Cтили для вертикального выравнивания находятся у content блока.

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

https://jsfiddle.net/AntowaKartowa/uLw6ns3c/4/

PS. То что считал ненужным закоментировал. Свои стили добавлял вниз селектора отделив пустой строкой.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы