时间戳

首页 > 解决方案 > 我可以在 CSS 网格中沿垂直轴 (y) 居中网格项目而不将容器的高度折叠到内容高度吗？

css - 我可以在 CSS 网格中沿垂直轴 (y) 居中网格项目而不将容器的高度折叠到内容高度吗？

问题描述

我需要在网格项上放置彩色背景，并使网格项内的文本元素内容垂直和水平居中，但是，当我使用 align-items 或 align-content 属性时，网格项的高度会折叠到其中内容的高度。这意味着背景颜色不会延伸到网格项目的上下边缘。

默认情况下，网格项会填充分配给它的整个网格区域，但里面的内容是对齐的。有没有办法在不折叠高度的情况下垂直和水平对齐网格项目中的内容？

这是基本设置：

.gContain {
  display: grid;
  grid-auto-columns: 1fr;
}

.gItem:nth-child(2n) {
  background-color: #000000;
}
<div class="gContain">
  <div class="gItem">
    <p>content</p>
  </div>
  <div class="gItem">
    <p>content</p>
  </div>
  <div class="gItem">
    <p>content</p>
  </div>
</div>

所以我需要让背景填充整个空间，同时仍然将文本沿 y 轴居中。这可能吗。

标签： cssalignmentcss-gridvertical-alignment

解决方案

推荐阅读