Наложение 2 текстовых элементов при вертикальном центрировании

#html #css

#HTML #css

Вопрос:

Я пытаюсь наложить два фрагмента текста прямо друг на друга, чтобы создать многоуровневый эффект, а также пытаюсь вертикально центрировать их в родительском элементе. Для вертикального центрирования я использую псевдоэлемент-призрак, как описано в этом посте, который я считаю наиболее надежным методом при центрировании в родительском элементе, высота которого является переменной.

Как вы можете видеть на скрипке ниже, элемент .bg-text центрирован по вертикали, но элемент .text-wrapper вынужден располагаться ниже родительского элемента, поэтому, похоже, этот метод вертикального центрирования не допускает более одного центрированного элемента?

 figure {
  position: relative;
  overflow: hidden;
  float: left;
  width: 100%;
  height: 200px;
  background: red;
}
figure::before {
  content: "[BEFORE]";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
/* Background text */

.bg-text {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  color: green;
  text-align: center;
}
/* Text */

.text-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  text-align: center;
  color: blue;
}

 <figure>
  <div class="bg-text">BACKGROUND TEXT</div>
  <div class="text-wrapper">
    <h3>Overlay This</h3>
    <h4>And this!</h4>
  </div>
</figure>

СКРИПКА

1. Наложения требуют абсолютного позиционирования … начните с этого.

2. Абсолютное позиционирование не позволяет выполнять вертикальное центрирование?

3. Конечно, так и будет…

4. Спасибо за помощь @Paulie_D, явно важная часть сообщества SO.

Ответ №1:

Flexbox и абсолютное позиционирование могут это сделать:

 * {
  margin: 0;
  padding: 0;
}
figure {
  position: relative;
  height: 200px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/* Background text */

.bg-text {
  width: 80%;
  color: green;
  text-align: center;
}
/* Text */

.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 255, 0, 0.25);
  width: 80%;
  text-align: center;
  color: blue;
}

 <figure>
  <div class="bg-text">BACKGROUND</div>
  <div class="text-wrapper">
    <h3>Overlay This</h3>
    <h4>And this!</h4>
  </div>
</figure>

Ответ №2:

Vertical-align:middle работает в table-celll, как вы не ставите. Используйте это в своем стиле, возможно, это поможет вам

 .bg-text {
    color: green;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 80%;
}

.text-wrapper {
    color: blue;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 80%;
}
figure {
    background: red none repeat scroll 0 0;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}