html - 基于行宽而不是项目宽度的 CSS 网格中心（对齐）项目

Question

我想知道如何使用 CSS Grid 将项目对齐到行的中心，而不仅仅是特定项目。在下面的片段中，您可以看到child2（红色的）如何仅在该项目中居中，而不是在整行的中心 - 它离右边有点太远了。

有没有办法做到这一点？

这也是一个小提琴：https ://jsfiddle.net/6ytqk7rL/

#parent {
  display:inline-grid;
  width:100%;
  grid-template-columns: [logo] 50px [title] auto;
  justify-items: center;
}
.child {
 background: blue;
 height:30px;
 width:30px;
}
#child2 {
  background: red;
  height: 30px;
  width: 30px;
} 

<div id="parent">
<div id="child1" class="child">

</div>
<div id="child2" class="child">

</div>
</div>

标签： htmlcsscss-grid

Answer 1

如果您希望红色方块位于整行的中心，则需要将其偏移<div>其左侧第一个的宽度。

作为元素，它的当前显示如下：

所以红色方块在其容器内居中对齐。它无法根据父级自动判断其位置 - 因此，如果您添加一个margin-left: -50pxthis 补偿#child1您在grid-templates-columns.