CSS网格定心

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

我没有做到的是将HTML中的文本集中到各自的网格单元格中。

我已经尝试将内容放在left_bg和right_bg选择器内外的单独divs中，并使用一些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">  <div class="left_bg">  </div> </div> <div class="right_bg">  </div> <div class="left_text">  <p>Review my stuff</p> <div class="right_text">  <p>Hire me!</p> </div> </div>

当前回答

您可以使用flexbox将文本居中。顺便说一下，不需要额外的容器，因为文本被认为是匿名的伸缩项。

来自flexbox规格:

伸缩容器的每个流内子元素都成为伸缩项，而直接包含在伸缩容器内的每个连续文本运行都包装在匿名伸缩项中。然而，只包含空格(即可以受空格属性影响的字符)的匿名伸缩项不会被呈现(就像它是display:none一样)。

因此，只需将网格项设置为伸缩容器(display: flex)，并添加align-items: center和justify-content: center以垂直和水平居中。

还进行了HTML和CSS的优化:

html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; font-family: Raleway; font-size: large; } .left_bg, .right_bg { display: flex; align-items: center; justify-content: center; } .left_bg { background-color: #3498db; } .right_bg { background-color: #ecf0f1; } <div class="container"> <div class="left_bg">Review my stuff</div> <div class="right_bg">Hire me!</div> </div>

2017-08-07 07:42:05

其他回答

尝试使用flex:

Plunker演示:https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

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

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

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

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

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

2017-08-07 07:43:49

CSS位置项简写属性分别设置align-items和justification -items属性。如果没有设置第二个值，也会使用第一个值。

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

2020-01-03 21:25:49

这招对我很管用:

.d-grid { 显示:网格; Grid-template-columns: repeat(3,1fr); Border-top: 1px纯黑色; Border-left: 1px纯黑色; ｝ .d-grid div { 高度:50 px; 显示:flex; Border-bottom: 1px纯黑色; 右边框:1px纯黑色; 对齐项目:中心; justify-content:中心; ｝ < div class = " d网格”> < div >文本1 < / div > < div >文本2 < / div > 文本< div > 3 < / div > < div >文本4 < / div > < div >文本5 < / div > < div >文本6 < / div > < / div >

2022-01-21 05:03:14

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