Позиционирование текста в середине галереи так, чтобы оно было отзывчивым - PullRequest
Новая
       33

Позиционирование текста в середине галереи так, чтобы оно было отзывчивым

0 голосов
/ 28 августа 2018

как мне разместить заголовок в верхней части галереи, как на картинке ниже.

Я использую шорткод для галереи, которая поставляется с моей темой.

Я смог сделать это с помощью позиции: абсолютная; и верхнее и нижнее значения, затем отцентрируйте их с помощью display: block; и маржа: 0 авто ;. Однако, когда я изменяю размер экрана, все становится не в порядке.

HTML-код 

<div class="gallery-column">
[shortcode goes here]
<h2>Title goes here</h2>
</div>

enter image description here

1 Ответ

0 голосов
/ 28 августа 2018

Самый простой способ сохранить элемент по центру как по горизонтали, так и по вертикали - использовать flexbox .

Все, что вам нужно для родительского элемента:

  • display: flex для обработки элемента как flexbox
  • align-items: center для вертикального выравнивания
  • justify-content: center для горизонтального выравнивания
  • фиксированный height (для создания отступов) - 100vh для полного экрана

Это можно увидеть в следующем: 

body {
  margin: 0;
}

.gallery-column {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
<div class="gallery-column">
  <div class="centered">
    <h2>Centered Element</h2>
  </div>
</div>

Элемент, о котором идет речь, останется точно в центре страницы, независимо от изменения размера экрана.

В вашем случае вам также понадобится z-index, чтобы элемент оставался сверху.
z-index: 1 должно быть достаточно.

...