我正在尝试使用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/