在 CSS 网格内放置文本和按钮 [重复]答案

【问题标题】：Place text and buttons inside CSS grid [duplicate]在 CSS 网格内放置文本和按钮 [重复]
【发布时间】：2019-08-10 04:39:50
【问题描述】：

我正在制作 CSS 网格，现在尝试在元素内制作一些嵌套网格。

嵌套网格的目的是有可能制作文本，并控制文本在网格元素中的位置。目前，文本位于顶部。

如何使文本在网格元素的中心或底部对齐？

.wrapper {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
      background-color: #fff;
      border: 10px solid #fff;
    } 
.nested {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .nested > div {
        border: 1px solid red;
    }
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/7;
      height: 700px;
      background-color:blue;
    }
    .item2 {
      grid-row: 1 / 1;
      grid-column: 7/13;
      height: 340px;
      background-color:yellow;
    }

<div class="wrapper">
    <div class="item1">
        <div class="nested">
            <div>Lorem column 1</div>
            <div>Lorem column 1</div>
            <div>Lorem column 1</div>
        </div>
    </div>
    <div class="item2 bg-img">
        <div class="nested">
            <div>Lorem column 2</div>
            <div>Lorem column 2</div>
            <div>Lorem column 2</div>
        </div>
    </div>
    
</div>

【问题讨论】：

标签： html css

【解决方案1】：

我将justify-items: center 添加到网格父级，它似乎已经解决了这个问题。

.nested {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
    }
    .nested > div {
        border: 1px solid red;
    }
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/7;
      height: 700px;
      background-color:blue;
    }
    .item2 {
      grid-row: 1 / 1;
      grid-column: 7/13;
      height: 340px;
      background-color:yellow;
    }

<div class="wrapper">
    <div class="item1">
        <div class="nested">
            <div>Lorem column 1</div>
            <div>Lorem column 1</div>
            <div>Lorem column 1</div>
        </div>
    </div>
    <div class="item2 bg-img">
        <div class="nested">
            <div>Lorem column 2</div>
            <div>Lorem column 2</div>
            <div>Lorem column 2</div>
        </div>
    </div>
    
</div>

【讨论】：

感谢您的建议。但是如果我想要蓝色网格元素中间的文本，黄色元素底部的文本。我该怎么做？
您可能可以通过更改 justify-content 和 align-content 来做到这一点。但是这段代码还有更多内容吗？你有没有为wrapper 设置样式？因为这里似乎item1 和item2 是网格元素。但如果不为wrapper 设置display: grid，那将无法工作
是的，大约有 4000 行代码 :-) 我刚刚更新了定义网格的包装类。所以问题基本上是我希望 100% 控制我的文本在网格元素中的放置位置。
为什么嵌套太多！？ :-) 整个事情看起来很简单。让我们看看item1，它是蓝色的。里面有一个grid，你必须把那个网格放在中间。所以在这一点上，它不再是关于 CSS 网格了。你只是想在另一个 div 中垂直居中一个 div。现在你可以让item1 另一个网格来完成它。你也可以使用flexbox或者绝对定位。