登录
当前位置： 首页 > 面试题库 >

在CSS网格中居中

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

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

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

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

问题答案：

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

  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网格项始终居中[重复]

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

  • 在JavaFX中居中对齐网格窗格的行

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

  • 如何在CSS网格的最后一行居中放置元素？

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

  • 在CSS中将div居中

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

  • 在顺风CSS网格中跨多个网格单元格

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

  • 使用CSS网格将最后一行中的项居中[重复]

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

相关阅读

CSS垂直居中CSS：固定在底部并居中CSS网格布局中的等高行CSS将图像水平居中CSS水平居中固定div？

相关文章

Bootstrap 网格系统Bootstrap4 网格系统Bootstrap5 网格系统2.2.5 GridLayout(网格布局)23秋招游戏系统策划面经（西山居、网龙、游族网络）都已OC

相关问答

CSS网格中的定心如何将图像控件居中在网格内？引导响应网格上的DIV居中如何在JTable中居中单元格CSS网格布局中的等高行

相关工具

CSS TesterCSS PatcherCSS ToolTipBlueprint CSSFoobar2000 Css

相关文档

Istio 服务网格进阶实战ThinkSNS Plus 官网中文文档揭秘 CSSGoogle 开源项目风格指南（中文版）CSS 基础教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.