我试图用CSS网格创建一个简单的页面。
我没有做到的是将HTML中的文本集中到各自的网格单元格中。
我已经尝试将内容放在left_bg和right_bg选择器内外的单独divs中，并使用一些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>
尝试使用flex:
Plunker演示:https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9
/* Styles go here */
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}
.left_bg {
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
}
.right_bg {
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-family: Raleway;
font-size: large;
text-align: center;
}
HTML
<div class="container">
<!--everything on the page-->
<div class="left_bg">
<!--left background color of the page-->
<div class="text">
<!--left side text content-->
<p>Review my stuff</p>
</div>
</div>
<div class="right_bg">
<!--right background color of the page-->
<div class="text">
<!--right side text content-->
<p>Hire me!</p>
</div>
</div>
</div>
您可以使用flexbox将文本居中。顺便说一下，不需要额外的容器，因为文本被认为是匿名的伸缩项。
来自flexbox规格:
伸缩容器的每个流内子元素都成为伸缩项，而直接包含在伸缩容器内的每个连续文本运行都包装在匿名伸缩项中。然而，只包含空格(即可以受空格属性影响的字符)的匿名伸缩项不会被呈现(就像它是display:none一样)。
因此，只需将网格项设置为伸缩容器(display: flex)，并添加align-items: center和justify-content: center以垂直和水平居中。
还进行了HTML和CSS的优化:
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
font-family: Raleway;
font-size: large;
}
.left_bg,
.right_bg {
display: flex;
align-items: center;
justify-content: center;
}
.left_bg {
background-color: #3498db;
}
.right_bg {
background-color: #ecf0f1;
}
<div class="container">
<div class="left_bg">Review my stuff</div>
<div class="right_bg">Hire me!</div>
</div>
