Html 这两个CSS中的网格居中对齐内部盒子有什么区别

发布于06月22日

我已经编写了两个代码片段，使用一个css网格来居中对齐内框，但不能理解其中的区别.

我知道我们还有其他方法，但我很好奇这两种方法之间的确切区别.

哪一个更合适/正确？为什么？

First个

justify-content: center;
align-content: center;

Second个

justify-items: center;
align-items: center;

超文本标记语言

<div class="box1">
  <div>Box1</div>
</div>
<div class="box2">
 <div>Box2</div>
</div>

CSS

 .box1, .box2 {
  border: 5px solid lightgreen;
  height: 250px;
  width: 250px;
  display: grid;
  justify-content: center;
  align-content: center;
  margin: 5px;
}
.box2 {
  display: grid;
  justify-items: center;
  align-items: center;
}
.box1>div, .box2>div {
  background: lightgreen;
  padding: 20px;
}

Output

推荐答案

在您的示例中，没有真正的区别，因 for each 示例中只有一个网格项.但这些实际上有不同的目的.

justify-content和align-content用于将网格容器的全部内容作为一个组对齐.因此，在下面的第一个示例中，所有四个长方体都位于黑色容器的中心.

justify-items和align-items用于在其各自的网格单元格内对齐各个网格项目.因此，在下面的第二个示例中，每个黄色正方形都在容器的四分之一内居中.

当容器中只有一个div时，两组属性的结果是相同的，但原因不同.

article.content {
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  justify-content: center;
  align-content: center;
}

article.items {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

article {
  display: grid;
  background: black;
  width: 400px;
  height: 400px;
  gap: 20px;
}

div {
  background: yellow;
  width: 100px;
  height: 100px;
}

<h1>justify-content and justify-items</h1>

<article class="content">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>

<h1>justify-items and align-items</h1>

<article class="items">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>

Html 这两个CSS中的网格居中对齐内部盒子有什么区别

推荐答案

Html相关问答推荐

如何在css中将包含多行文本的多个p-tag放在一起(并排)？

将网格包装在css中

HTML表行悬停仅适用于偶数行

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

邮箱追踪器-有效，但在Gmail客户端中是否可以显示问号图标以外的其他内容？

悬停效果在新西兰表上不起作用

嵌套表列高度不是100%高度的问题

更改垫子输入的涟漪 colored颜色

悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

30000ms后超时重试：期望找到元素：someElement，但从未找到它

为什么我的网页显示网格区域彼此相邻，而不是我设置它们的方式？

嵌入最近的 YOUTUBE 视频(不是短片，视频)

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充？

绝对类在另一个绝对类之上

如何使我的设计适合与我的框架尺寸不同的视口？

从垫分页器中删除输入边框

为什么 text-align 应用于 span 而不是 CSS 中的 img

另一个 flex 元素之间的 CSS 空间

html tailwindcss 给 li 标签添加边框

文本输入在 Chrome 中保持水平滚动，带有文本溢出：省略号