2

我正在试验，display: grid;但不明白如何grid-row-align工作grid-column-align。一些文档指出（编辑：这个链接现在已经消失了，可能是在我发表了指向下面 Michael_B 答案的评论之后）

该grid-row-align属性定义行内的垂直对齐方式，同时grid-column-align定义列内的水平对齐方式。

我的理解是，这是一个必须在受影响元素的容器中设置的属性（但我也尝试将其放入元素本身的规则中）。具体来说，我希望在下面的代码中，单词hello将在他的框中水平和垂直居中。

这些属性的正确用法是什么？

注意：我使用的是 Chrome 58，根据兼容性矩阵可以。

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  grid-row-align: center;
  grid-column-align: center;
}
#box-1 {
  grid-column: 1;
  grid-row: 1;
  border-style: solid;
  border-width: 1px;
  /* I also tried to put them here
  grid-row-align: center;
  grid-column-align: center;
  */
}
#box-2 {
  grid-column: 1;
  grid-row: 2;
  border-style: solid;
  border-width: 1px;
}
<div id="container">
  <div id="box-1">
    hello
  </div>
  <div id="box-2">
    world
  </div>
</div>

4

2 回答 2

4

在当前的CSS 网格布局规范中，没有 和 等grid-row-align属性grid-column-align。它们根本不存在（参见属性索引）。

这些属性是现已过时的 Grid 规范的一部分，该规范不再在浏览器中实现。IE10/11 和 Edge 可能仍支持grid-row-align/ grid-column-align，但Edge 目前正在升级到当前规范。

要在网格项中居中文本，只需使用 flexbox：

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
}

#box-1 {
  grid-column: 1;
  grid-row: 1;
  border-style: solid;
  border-width: 1px;

  /* NEW */
  display: flex;
  justify-content: center;
  align-items: center;
}

#box-2 {
  grid-column: 1;
  grid-row: 2;
  border-style: solid;
  border-width: 1px;

  /* NEW */
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="container">
  <div id="box-1">hello</div>
  <div id="box-2">world</div>
</div>

请记住，容器上的对齐属性将应用于网格项，但不适用于网格项的内容，这是另一个级别。

因此，如果您提供容器justify-items: centerand align-items: center，则整个项目将在容器中居中，这不是您想要的。

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  justify-items: center; /* new */
  align-items: center;   /* new */
}

#box-1 {
  grid-column: 1;
  grid-row: 1;
  border-style: solid;
  border-width: 1px;
}

#box-2 {
  grid-column: 1;
  grid-row: 2;
  border-style: solid;
  border-width: 1px;
}
<div id="container">
  <div id="box-1">hello</div>
  <div id="box-2">world</div>
</div>

因此，您需要使网格项成为嵌套容器，以便将对齐属性应用于内容。您可以在上面的示例中给出项目display: grid并使用justify-items和align-items喜欢。但是，如果您不需要在网格项中添加新的网格，那么 flex 可能是一个更简单（更轻巧？）的解决方案。

于 2017-05-26T17:56:16.723 回答
1

网格布局的官方 w3 规范没有 grid-row-align 或 grid-column-align 条目

https://www.w3.org/TR/css3-grid-layout/

您正在寻找的是带有选项 align-items: center; 的 Flexbox(display:flex;) 并证明内容：中心；这将做同样的事情。如果你想将整个网格项目对齐到中心，那么你可以在没有弹性框的网格上使用“align-items”和“justif-content”。

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  align-items: center;
  justify-content: center;
}

代码笔 https://codepen.io/srajagop/pen/rmbvYV

于 2017-05-26T17:56:02.930 回答