html - 如何使网格中的文本居中？

Question

特定文本不能放在 CSS 网格的中心。

我有一个网格 CSS，但文本“邮政管理器”似乎没有居中。我已将网格项放入 flex 容器中，但只有此文本似乎不遵守规则。任何想法都值得赞赏。谢谢你。

body {
  font-family: sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  width: 100vw;
  height: 100vh;
}

.gn {
  background-color: #7fd2f0;
  grid-row: 1 / 16;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotateZ(180deg);
}

.ab {
  background-color: #85fedd;
  grid-column: 2/16;
}

.pm {
  background-color: #f7f7f7;
  grid-row: 2/16;
  grid-column: 2/5;
  text-align: center;
}

.wp {
  background-color: #c6c6c6;
  grid-column: 6/16;
  grid-row: 2/16;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="center-text gn">Global Navigation</div>
  <div class="center-text ab">Application Bar</div>
  <div class="center-text pm">Post Manager</div>
  <div class="center-text wp">Writing Space</div>
</div>

标签： htmlcsscss-grid

Answer 1

试试这个。

.pm {
    grid-column: 2/6;
}