masimore
@masimore

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

Ребята помогите в верстке есть такой вот шаблон тот что верстаю как сделать чтоб было как скриншоте чтоб контент в шапке и в навигации был по середине? идею взял тут 6f26652c53064d19be6c34c252df2c97.png
  • Вопрос задан
  • 343 просмотра
Решения вопроса 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. То что считал ненужным закоментировал. Свои стили добавлял вниз селектора отделив пустой строкой.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
02 нояб. 2024, в 21:08
2000000 руб./за проект
02 нояб. 2024, в 20:34
40000 руб./за проект
02 нояб. 2024, в 20:05
800 руб./в час