当前位置: 首页 > 面试题库 >

在CSS网格中居中

端木淇
2023-03-14
问题内容

我正在尝试使用CSS Grid创建一个简单的页面。

我无法做的是将HTML文本集中到相应的网格单元格。

我尝试将内容放置在和选择器div内部和外部的单独s中,left_bgright_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>

问题答案:

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

  1. 了解对齐方式在CSS Grid中的工作方式。
  2. 在CSS Grid中居中的六种方法。
    如果您仅对解决方案感兴趣,请跳过第一部分。

网格布局的结构和范围
要完全了解居中在网格容器中的工作方式,首先了解网格布局的结构和范围很重要。

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

  • 容器
  • 该项目
  • 内容

就应用网格属性而言,每个级别都独立于其他级别。

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

这意味着网格容器始终是父级,而网格项目始终是子级。网格属性仅在此关系内起作用。

子代之外的网格容器的后代不属于网格布局,并且不接受网格属性。(至少要等到实现该subgrid功能后才能这样做,这将允许网格项目的后代遵守主容器的行。)

这是上述结构和范围概念的示例。

想象一下像井字游戏一样的网格。

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>

同样的问题align-items:内容可能以副产品为中心,但是您失去了布局设计

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-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>

要使内容居中,您需要采用其他方法。再次参考网格布局的结构和范围,您需要将网格项视为父项,将内容项视为子项。

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

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  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>

在CSS网格中居中的六种方法

有多种方法可以使网格项及其内容居中。

这是一个基本的2x2网格:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

flexbox
为了使网格项目的内容居中,这是一种简单易行的方法,请使用flexbox。

更具体地说,将网格项放入弹性容器中。

此方法没有冲突,不违反规范或其他问题。这是干净有效的。

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

网格布局

与伸缩商品也可以是伸缩容器一样,网格商品也可以是栅格容器。该解决方案与上面的flexbox解决方案类似,不同的是,居中是通过grid属性(而非flex属性)完成的。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

auto 边距
使用margin: auto垂直和水平中心网格项目。

grid-item {
  margin: auto;
}
/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

要使网格项目的内容居中,您需要将其放入网格(或flex)容器中,将匿名项目包装在它们自己的元素中(因为CSS不能直接将它们定位),然后将边距应用于新元素

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

框对齐属性

当考虑使用以下属性来对齐网格项目时,请阅读auto上面的边距部分。

  • align-items
  • justify-items
  • align-self
  • justify-self

text-align: center

要使内容在网格项目中水平居中,可以使用text-align属性。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

请注意,对于垂直居中,vertical-align: middle将不起作用。

这是因为该vertical-align属性仅适用于嵌入式和表格单元容器。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

可能有人说display: inline-grid建立了一个内联级别的容器,这是事实。那么,为什么vertical-align在网格项中不起作用?

原因是在网格格式化上下文中,项目被视为块级元素。

6.1。网格项目显示

display网格项的值是块化的:如果display生成网格容器的元素的流入子项的指定是内联级别的值,则它将计算为其等效的块级别。

在块格式化上下文中,该vertical-align属性最初是为该属性设计的,浏览器不希望在内联级容器中找到块级元素。那是无效的HTML。

CSS定位

最后,有一个通用的CSS居中解决方案也可以在Grid中使用:绝对定位

这是使需要从文档流中删除的对象居中的好方法。例如,如果您想:

  • 在图像上居中显示文字,或
  • 在必填字段上方放置星号(*)

只需position: absolute在要居中的元素上设置,然后position: relative在将用作包含块的祖先上进行设置(通常是父代)。像这样:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}
<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>


 类似资料:
  • 我正在使用CSS网格处理一些框项目。这看起来很好,但是当我把屏幕变小时,当容器中只有2或1个盒子在左边时,我该如何让它们始终在中间?

  • 我在fxml中有一个GridPane,它有一个文本标题和4个按钮。GridPane本身是居中对齐的,但所有按钮都在网格的列内左对齐。我知道如何使用Java代码更改项目的对齐方式,但这不是理想的情况,因为我希望所有样式都使用FXML和CSS处理。有谁能建议在JavaFX的GridPane视图中居中对齐单元格元素的最佳方法吗?

  • 问题内容: 我正在使用CSS网格来布局这样的某些项目… 如何使最后一行居中而不是左对齐?我不能保证项目的数量,因此想要使布局适合任何数量的项目。 这是我应该使用flexbox代替的东西吗?还是CSS网格适合使用? 问题答案: CSS Grid不适合在整行中对齐,因为纵横交错的轨道阻碍了这种方式。以下是详细说明: 或者,将flexbox与一起使用。 这会将所有项目打包在该行的水平中心。然后,您的利润

  • 问题内容: 我试图在此页面上将新闻滑块(位于div底部容器中)居中: http://www.luukratief- design.nl/dump/parallax/index.html 我已经有了 仍然不起作用。 有什么建议么? 问题答案: 在仅中心元素的 在线内容 ,而不是元素本身。 如果它是一个 块_元素(一个是),则需要设置;否则,如果它是一个[ _内联_元素],则需要在 _其父 元素上设置

  • 我正在使用顺风CSS,并试图建立一个网格,使某些单元格内容跨越多个单元格,而其他项目留在单个单元格。在下面的代码中,我试图展示我正在尝试完成的事情。我知道我的col-span-2班什么也没做,但我把它放在那里是为了表明我希望我能做什么。我想让所有的单元格都是相同的宽度(我只想让一些单元格内容跨越分隔线)。我需要某种覆盖逻辑吗? 感谢任何帮助。 谢谢!

  • 我试图将底部两个li项(下图中的餐厅信息容器)集中在设置为显示:网格的ul列表中。我原以为添加到ul列表规则集会起作用,但它没有。我还尝试了,它没有改变任何东西。是否有一个解决方案,与CSS网格,将项目在最后一行?