网格对齐水平居中不起作用

Question

.parent{

  border:1px solid red;

  display:grid;

  grid-template-columns: repeat(12, 1fr);

}

.child{

  background:green;

  align-self:center;

}

<div class="parent">

  <div class="child" style="justify-self: center;">

    I am child

  </div>

</div>

我正在寻找一种解决方案，让孩子应该将自己对齐到中心。所以我可以创建一个类名，以便left, right, and center跨域使用。

Answer 1

这里发生的是自动网格放置。从技术上讲，该项目与您创建的第一列内的中心对齐。问题是它一直在左边，因为那是你的第一列实际上所在的位置。如果您想继续使用 CSS 网格来实现此布局概念，可以通过多种方法来解决此问题。但 12 列网格的问题是，如果没有一些偏移或变换，就不会有“中心”。如果您确实只需要一排有 3 个可能的位置，我建议您使用以下内容。它是一个 13 列网格，具有单行的定义高度，这确保了如果项目被无序地洗牌（如果像我的示例一样 left 是第二个），它们不会跳转到第二个隐含行。.parent{&nbsp; border:1px solid red;&nbsp; display:grid;&nbsp; grid-template-columns: repeat(13, 1fr);&nbsp; grid-template-rows: 60px;}.center{&nbsp; background:green;&nbsp; grid-column: 7/8;&nbsp; grid-row: 1/2;}.left {&nbsp; background: red;&nbsp; grid-column: 1/2;&nbsp; grid-row: 1/2;}.right {&nbsp; background: blue;&nbsp; grid-column: 13/14;&nbsp; grid-row: 1/2;}<div class="parent">&nbsp; <div class="center">&nbsp; &nbsp; I am child&nbsp; </div>&nbsp; <div class="left">&nbsp; &nbsp; Me too&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; Also me&nbsp; </div></div>编辑：您还可以使用 Flexbox 并通过使用 order 属性并将内容调整为空格来降低一些复杂性并获得更好的响应能力。.parent {&nbsp; border: 1px solid red;&nbsp; display: flex;&nbsp; justify-content: space-between;}.center {&nbsp; background: green;&nbsp; order: 2}.left {&nbsp; background: red;&nbsp; order: 1}.right {&nbsp; background: blue;&nbsp; order: 3}<div class="parent">&nbsp; <div class="center">&nbsp; &nbsp; I am child&nbsp; </div>&nbsp; <div class="left">&nbsp; &nbsp; Me too&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; Also me&nbsp; </div></div>

Answer 2

这是一个优化版本，具有灵活的值，可以与任意数量的列一起使用。我会考虑 CSS 变量来轻松调整模板和中心元素。对于左边和右边我们只需要1和-1.parent{&nbsp; --n:6;&nbsp;&nbsp;&nbsp; display:grid;&nbsp; grid-template-columns: repeat(calc(2*var(--n)), 1fr);&nbsp; grid-auto-flow:dense;&nbsp; margin:5px;&nbsp;outline:1px solid;}.left{&nbsp; grid-column-start:1;}.right{&nbsp; grid-column-end:-1;&nbsp; text-align:right;}.center {&nbsp; grid-column:calc(var(--n))/span 2;&nbsp; text-align:center;}.parent > * {&nbsp;border:1px solid red;}<div class="parent">&nbsp; <div class="left">&nbsp; &nbsp; left&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; right&nbsp; </div>&nbsp; <div class="center">&nbsp; &nbsp; center&nbsp; </div></div><div class="parent" style="--n:3">&nbsp; <div class="left">&nbsp; &nbsp; left&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; right&nbsp; </div>&nbsp; <div class="center">&nbsp; &nbsp; center&nbsp; </div></div><div class="parent" style="--n:10">&nbsp; <div class="left">&nbsp; &nbsp; left&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; right&nbsp; </div>&nbsp; <div class="center">&nbsp; &nbsp; center&nbsp; </div></div>

Answer 3

.parent {&nbsp; border: 1px solid red;&nbsp; display: grid;&nbsp; grid-template-columns: repeat(1, 1fr);}