HTML CSS：對齊文本框中的部分，標題頂部和中間的描述

Question

如何在一個框中對齊兩個不同的文本？ 我希望 Header 位於頂部，Description 位於中間。 見下文。 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

您可以使用彈性框來組織您的元素並相應地對齊主題

見代碼片段：

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