如何用网格水平居中文本

Question

我现在正在学习CSS，在完成我的网格课程后，我必须解决作业但是我有一些问题……查看代码并将其与photo

进行比较

<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
*{
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.grid {
background-color: #ddd;
padding: 20px;
width: 800px;
height: 400px;
text-align: center;
margin: auto;
display: grid;
grid-template-columns: auto 1fr 1fr auto;
grid-template-rows: 1fr auto;
gap: 20px 20px;
}
.grid div{
background: #403f3f;
color: white;
}

点击我打开照片

Answer 1

首先，确保你的css是在导入的另一个文件上，或者在标签内。

除此之外，文本的调整非常简单。我会将每个div设置为伸缩框，并将项目居中对齐，以及将内容居中对齐，如下所示:

*{
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.grid {
background-color: #ddd;
padding: 20px;
width: 800px;
height: 400px;
text-align: center;
margin: auto;
display: grid;
grid-template-columns: auto 1fr 1fr auto;
grid-template-rows: 1fr auto;
gap: 20px 20px;
}
.grid div{
background: #403f3f;
color: white;
display: flex;
justify-content: center;
align-items: center
}

这个简单的修复应该垂直和水平居中!!

祝你好运。

Answer 2

.grid div{
display:flex;
/* for start flex */
align-items: center;
/* for rows center */
justify-content: center;
/* for columns center */
}
or
.grid div{
display:grid;
/* for start grid */
place-content: center;
/* rows and columns center */
}