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

Question

我现在正在学习 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

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

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

how do i center text horizontally with grid

html

javascript

css

grid

frontend