Question

我想创建一个以内容为中心的正方形网格：

#all {
  display: grid;
  grid-template-rows: 200px;
  grid-template-columns: 200px 20px 200px;
}

.disp {
  background-color: black;
  color: white;
  border-color: gray;
  border-width: 10px;
  border-style: solid;
  @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
  font-family: 'Open Sans', sans-serif;
  font-size: 120px;
  font-weight: bolder;
  padding: 0 20px 0 20px;
  align-self: center;
  justify-self: stretch;
}

<div id="all">
  <span class="disp hour">9</span><span class="sep"> </span><span class="disp min">27</span>
</div>

我无法使9居中并同时保留200px的宽度。用justify-self: center;替换最后的CSS行确实使9居中，但也减小了单元格的宽度以使其适合。保留网格的宽度。

如何在CSS Grid中说“居中并扩展到单元格的宽度”？

Answer 1

您只需要text-align:center

将此添加到您的CSS代码中：

如果只希望9个居中：

.hour {
   text-align:center;
}

如果您希望两者都居中：

.disp {
   text-align:center;
}

在Chrome Inspect Element中进行了测试。

.min类也可以使用同样的技巧。

希望这会有所帮助。

Answer 2

这将起作用：

  .hour {
      text-align:center;
    }

如何在CSS网格中居中显示内容并保持指示的大小？

2 个答案: