[英]HTML CSS: Align Pieces in Text Box, Header Top and Description in Middle
如何在一个框中对齐两个不同的文本? 我希望 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&preset=gallery-tab-main-image"> <div class="test"> Header <br> Description </div> </div>
目标:
测试
您可以使用弹性框来组织您的元素并相应地对齐主题
见代码片段:
.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&preset=gallery-tab-main-image"> <div class="test"> <div class="header">Header</div> <div class="description"> Description</div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.