Вертикально выровнять элемент с 1/3 пробелом над 2/3 пробелом ниже - PullRequest
Новая
       6

Вертикально выровнять элемент с 1/3 пробелом над 2/3 пробелом ниже

0 голосов
/ 01 февраля 2019

У меня есть «изображение героя», заполняющее высоту и ширину области просмотра.Внутри этого div есть заголовок.Мне бы хотелось, чтобы заголовок был выровнен по вертикали, чтобы любое доступное пространство было на одну треть выше и на две трети ниже.

Например: изображение героя = высота 1000 пикселей.H1 = 400 пикселей в высоту.Таким образом, пространство выше будет = 200 пикселей, пространство ниже = 400 пикселей

Это адаптивный макет, поэтому я не знаю высоту изображения героя или заголовка.

Вертикальное центрирование с помощью Flexbox легко,но мне нужно больше места внизу.Кто-нибудь может подсказать мне правильные указания?

Вот мой код.Обратите внимание, что раньше я не использовал Flex, поэтому я не знаю, что делаю. 

.hero_image {
    min-height:100vh;
    background-color:yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.hero_image h1 {
    font-size:72px;
    padding-top:20px;
    }

<div class="hero_image">
    <h1>Heading <br>more text <br>last bit of text</h1>
</div>

Вот ссылка на пример JSFiddle https://jsfiddle.net/yvf6tgh8/2/

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

Для обработки части макета я бы использовал CSS Grid:

CSS Grid Layout выделяется при делении страницы на основные области или определении отношений с точки зрения размера, положения и слоя между частямиэлемента управления, построенного из HTML-примитивов.

Как и таблицы, макет сетки позволяет автору выравнивать элементы по столбцам и строкам.Тем не менее, с помощью сетки CSS возможно или проще сделать больше макетов, чем с таблицами.Например, дочерние элементы контейнера сетки могут позиционировать себя так, чтобы они фактически перекрывались и накладывались друг на друга, подобно позиционированным элементам CSS.

MDN

Попробуйтеэто онлайн! 

.hero_image {
  min-height: 100vh;
  background-color: yellow;
  display: grid;
  grid-template-rows: 1fr auto 2fr; /* here is the fun */
}

.hero_image>.content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero_image h1 {
  font-size: 72px;
  padding-top: 20px;
}

/* just to show margin */
.hero_image>div:first-child,
.hero_image>div:last-child {
  background: red;
}

body {
  margin: 0;
}
<div class="hero_image">
  <div></div>
  <div class="content">


    <h1>Heading <br>more text <br>last bit of text</h1>
  </div>
  <div></div>
</div>
0 голосов
/ 01 февраля 2019

Создайте свой hero_image a столбец flexbox с псевдоэлементами :

  • и задайте flex: 1 before и
  • flex: 2 до after, чтобы получить эффект.

См. Демонстрацию ниже: 

.hero_image {
  min-height: 100vh;
  background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;  /* ADDED */
}

.hero_image h1 {
  font-size: 72px;
  padding-top: 20px;
  background: #fff; /* For Illustration */
}

body {
  margin: 0;
}

.hero_image:after { /* ADDED */
  flex: 2;
  content: '';
}
.hero_image:before { /* ADDED */
  flex: 1;
  content: '';
}
<div class="hero_image">
  <h1>Heading <br>more text <br>last bit of text</h1>
</div>
0 голосов
/ 01 февраля 2019

Вы можете использовать calc(33% - <headinghieght>), но для этого вам нужно знать headingHieght.

Вы можете попробовать что-то вроде этого: 

#container1 {
    /*hieght : 100px;*/
    border : 2px solid blue; 
}

#headingContainer {
    margin-top: 33%;
    margin-bottom: 66%;
    hieght : 40px;
    border: 1px solid red;
}
<h1>The calc() Function</h1>

<div id = "container1">
text
    <div id = "headingContainer">HEADING</div>
    text 2
</div>
...