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

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{

  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>

Answer 2

这是一个优化版本，具有灵活的值，可以与任意数量的列一起使用。

我会考虑 CSS 变量来轻松调整模板和中心元素。对于左边和右边我们只需要1和-1

.parent{

  --n:6;

  

  display:grid;

  grid-template-columns: repeat(calc(2*var(--n)), 1fr);

  grid-auto-flow:dense;

  margin:5px;

 outline:1px solid;

}

.left{

  grid-column-start:1;

}

.right{

  grid-column-end:-1;

  text-align:right;

}

.center {

  grid-column:calc(var(--n))/span 2;

  text-align:center;

}

.parent > * {

 border:1px solid red;

}

<div class="parent">

  <div class="left">

    left

  </div>

  <div class="right">

    right

  </div>

  <div class="center">

    center

  </div>

</div>

<div class="parent" style="--n:3">

  <div class="left">

    left

  </div>

  <div class="right">

    right

  </div>

  <div class="center">

    center

  </div>

</div>

<div class="parent" style="--n:10">

  <div class="left">

    left

  </div>

  <div class="right">

    right

  </div>

  <div class="center">

    center

  </div>

</div>

Answer 3

.parent {

  border: 1px solid red;

  display: grid;

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

}