HTML CSS: выравнивание частей в текстовом поле, верхний колонтитул и описание в середине

Question

Как выровнять два разных фрагмента текста в окне? Я бы хотел, чтобы заголовок был сверху, а описание - посередине. Увидеть ниже. Align Self-center перемещает описание по центру, однако пытается сделать заголовок сверху независимо от размера блока.

Цель сохранить описание статичным в середине, независимо от переполнения заголовка.

.grid-container {
        display: grid;
        grid-template-columns: 140px 140px;
        grid-template-rows: 140px;
        align-items: stretch;

    }

img {
  width: 100%;
  height: auto;
}

.test
{
  text-align:center;
  vertical-align:center;
  align-self: center
}

<div class="grid-container" id="gridid42f08d611e2346748fbe47264fd732e0">
    <img class="imgcard mCS_img_loaded" id="imgid42f08d611e2346748fbe47264fd732e00" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
    <div class="test"> Header <br> Description </div>
</div>

Цель:

тест

Answer 1

Вы можете использовать flex box, чтобы упорядочить свой элемент и соответствующим образом выровнять тему

См. Фрагмент кода:

.grid-container {
  display: grid;
  grid-template-columns: 140px 140px;
  grid-template-rows: 140px;
  align-items: stretch;
}

img {
  width: 100%;
  height: auto;
}

.test {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.description {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

<div class="grid-container" id="gridid42f08d611e2346748fbe47264fd732e0">
  <img class="imgcard mCS_img_loaded" id="imgid42f08d611e2346748fbe47264fd732e00" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
  <div class="test">
    <div class="header">Header</div>
    <div class="description"> Description</div>
  </div>
</div>