html - 在CSS网格中居中-6ren

html - 在CSS网格中居中

转载作者：行者123 更新时间：2023-11-28 19:16:12

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

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

我试过将内容放在div和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>

最佳答案

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

了解对齐方式在CSS Grid中的工作方式。
在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>

jsFiddle demo

在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。

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

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

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>

请参阅此帖子以获取完整说明：

How to Center Elements Vertically and Horizontally in Flexbox

网格布局

与伸缩商品也可以是伸缩容器一样，网格商品也可以是栅格容器。该解决方案与上面的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;
}

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

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）容器中，将匿名项目包装在其自己的元素（ since they cannot be directly targeted by 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

https://www.w3.org/TR/css-align-3/#property-index

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在网格项中不起作用？

原因是在 grid formatting context中，项目被视为块级元素。

   6.1. Grid Item Display

  网格项的 display值被阻止：如果
  生成一个元素的元素的流入子元素的指定 display
  网格容器是一个内联级别的值，它计算为其
  块级等效。

在 block formatting context中，最初是为 vertical-align属性设计的，而浏览器则不会在内联级容器中找到块级元素。那是无效的HTML。

CSS定位

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

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

Center text over an image，或
Place asterisks (*) above required form fields

只需在要居中的元素上设置 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>

这是此方法如何工作的完整说明：

Element will not stay centered, especially when re-sizing screen

这是有关网格规范中绝对定位的部分：

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

关于html - 在CSS网格中居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58270602/

文章推荐： objective-c - 在 AppDelegate 中存储、访问和编辑字符串

文章推荐： objective-c - iOS SDK : Working with NSUserDefaults

文章推荐： iphone - 重新输入选项卡时更新 UITableView

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在CSS网格中居中