我如何用网格水平居中文本答案

【问题标题】：how do i center text horizontally with grid我如何用网格水平居中文本
【发布时间】：2021-10-20 22:14:39
【问题描述】：

我现在正在学习 css，在完成我的网格课程后，我必须解决作业但是我这里有一些问题...查看代码并将其与照片进行比较

<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;
}

click me to open the photo

【问题讨论】：

什么不是水平居中但应该居中？

标签： javascript html css grid frontend

【解决方案1】：

首先，确保您的 css 位于要导入的不同文件中，或位于标签内。

除此之外，文本的调整非常简单。我会让每个 div 成为一个 flex box，并对齐项目中心，以及将内容中心对齐：

*{
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
}

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

祝你好运。

【讨论】：

【解决方案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 */
}

【讨论】：