HTML CSS：对齐文本框中的部分，标题顶部和中间的描述

Question

如何在一个框中对齐两个不同的文本？我希望标题位于顶部，而描述位于中间。见下文。 Align Self-center 将描述移动到中间，但无论框大小如何，都试图将 Header 放在顶部。

目标是在中间保持描述静态，而不管标题是否溢出。

.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

您可以使用弹性框来组织您的元素并相应地对齐主题

见代码sn-p：

.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>