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

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>

我正在寻找一种解决方案，让 child 自己对齐中心。所以我可以为 left, right, and center 创建一个类名，将在整个范围内使用。

Answer 1

此处为您进行的是自动网格放置。从技术上讲，该元素与您创建的第一列内的中心对齐。问题是它一直在左侧结束，因为那是您的第一列实际所在的位置。

如果您想继续将 CSS Grid 用于此布局概念，则可以通过几种方法来解决这个问题。但是 12 列网格的问题在于，如果不进行一些偏移或变换，将不会有“中心”。

如果您真的只需要一行和 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>