CSS网格中的定心

Question

我试图创建一个简单的页面与CSS网格。

我没有做到的是将超文本标记语言的文本集中到相应的网格单元格。

我尝试过将内容放在单独的divs内部和外部的left_bg和right_bg选择器中，并使用一些CSS属性，但没有效果。

我该怎么做？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Answer 1

甚至不要尝试使用flex和css网格。只需在content元素上添加以下内容：

place-self: center;

它将在这里做定心工作。

如果要将网格单元内的div中的某些内容居中，则需要定义嵌套网格以使其工作。演示中显示了这两个示例。

https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 2

CSS“放置项目速记”属性分别设置“对齐项目”和“对齐项目”属性。如果未设置第二个值，则第一个值也将用于该值。

.parent {
  display: grid;
  place-items: center;
}

Answer 3

这个答案有两个主要部分：

1. 了解CSS网格中对齐的工作原理。
2. CSS网格中居中的六种方法。

如果您只对解决方案感兴趣，请跳过第一部分。

要完全了解网格容器中的居中工作原理，首先了解网格布局的结构和范围很重要。

网格容器的HTML结构有三个级别：

• 集装箱
• 项目
• 内容

就应用栅格特性而言，这些级别中的每一个都独立于其他级别。

网格容器的范围仅限于父子关系。

这意味着网格容器始终是父容器，网格项始终是子容器。网格属性仅在此关系中起作用。

子级之外的网格容器的子体不属于网格布局的一部分，并且不接受网格属性。（至少在实现子网格功能之前，这将允许网格项的后代尊重主容器的行。）

下面是上面描述的结构和范围概念的一个例子。

想象一下一个类似井字游戏的网格。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

您希望X和O在每个单元格中居中。

因此，在容器级别应用居中：

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

但由于网格布局的结构和范围，容器上的“justify items”以网格项目为中心，而不是以内容为中心（至少不是直接）。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>