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

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

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

}

Answer 2

这里发生的是自动网格放置。从技术上讲，该项目与您创建的第一列内的中心对齐。问题是它一直到左侧，因为那实际上是您的第一列。

如果您想继续使用CSS Grid来实现此布局概念，可以采用几种方法。但是12 col网格的问题在于，没有一些偏移或变换就不会有“中心”。

如果您确实只需要一行并包含3个可能的展示位置，则建议您使用以下内容。这是一个13格的网格，具有定义的单行高度，这可以确保项目是否乱序（如果像我的示例那样排第二位），则它们不会跳到第二个隐含行。

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

.center{
  background:green;
  grid-column: 7/8;
  grid-row: 1/2;
}
.left {
  background: red;
  grid-column: 1/2;
  grid-row: 1/2;
}
.right {
  background: blue;
  grid-column: 13/14;
  grid-row: 1/2;
}

<div class="parent">
  <div class="center">
    I am child
  </div>
  <div class="left">
    Me too
  </div>
  <div class="right">
    Also me
  </div>
</div>

编辑：您还可以使用flexbox并通过使用order属性并将内容对齐为空格来降低某些复杂性并获得更好的响应性。
 
.parent {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}

.center {
  background: green;
  order: 2
}

.left {
  background: red;
  order: 1
}

.right {
  background: blue;
  order: 3
}
<div class="parent">
  <div class="center">
    I am child
  </div>
  <div class="left">
    Me too
  </div>
  <div class="right">
    Also me
  </div>
</div>