时间戳

首页 > 解决方案 > 网格对齐水平中心不起作用

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

问题描述

.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在使用时使用。

标签： htmlcsscss-grid

解决方案

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

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

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

.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>

推荐阅读