2

Не могу отцентрить как нужно блоки в фулскрин странице

Кода не приложу ибо вообще ничего не получилось разумного Вобщем тема такая вот набросал макет как все задумывается:введите сюда описание изображения

div с h1 должен быть отцентрован горизонтально и вертикально а div с p должен быть приклеяным как бы к низу ну и смаргином каким нибуть

Все это должно находиться в div Content с какимнибуть фоном

И самое главное все это должно быть на всю страницу и адаптивным

для решения проблемы пытался использовать flex но он центрует сразу и h1 и p вместе а надо чтоб один по центру а другой снизу

использование такого костыля как pos-relativ потом pos-a и отриц маргины не вариант потому как высота H1 и P не статичны(не известны изначально)

Пожалуйста помогите сделать это адаптивным

3
  • Пример - jsfiddle.net/3yvhwwzL
    – soledar10
    7 мая 2017 в 18:37
  • @soledar10 дело в том что блока два один по центру другой снизу а у вас три
    – PhilStar
    7 мая 2017 в 18:40
  • @VipFilStar почему именно на флекс ? на table-cell тоже самое можно сделать и по верьте даже браузера типа Midori даже будут понимать это
    – user33274
    8 мая 2017 в 4:17

1 ответ 1

0

Вариант 1. Заголовок будет отцентрован, а описание прижато к низу по центру, этот вариант, если блок контента имеет фиксированную высоту, в данном случае fullscreen высота и ширина блока должны быть растянуты по всему экрану. Преимущество в том, что заголовок будет всегда строго по центру, в независимости от получившейся высоты блока.

* {
  color: white;
  box-sizing: border-box;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(//images.pexels.com/photos/45875/raspberries-berries-fruits-red-45875.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  padding: 20px;
  height: 100vh;
  width: 100%;
}

h1,
p {
  display: inline-block;
  border: 2px solid white;
  border-radius: 20px;
  padding: 10px;
}

h1 {
  margin: auto;
  transform: translateY(50%);
}
<div class="content">
  <h1>Заголовок</h1>
  <p>Описание</p>
</div>

Вариант 2. Если высота блока всё же может быть любой, то самое простое решение будет отцентровка с прижимом к нижней части, но тогда придётся будет для заголовка и описания добавлять margon-top, чтобы отделять их друг от друга. Преимущество в том, что можно выставить необходимые отступы и блок по высоте будет растягиваться автоматически.

* {
  color: white;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(//images.pexels.com/photos/45875/raspberries-berries-fruits-red-45875.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  padding: 20px;
}

h1,
p {
  display: inline-block;
  border: 2px solid white;
  border-radius: 20px;
  padding: 10px;
  margin-top: 200px;
}
<div class="content">
  <h1>Заголовок</h1>
  <p>Описание</p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.