不能将特定文本放在 CSS 网格的中心。
我有一个网格 CSS,但文本“Post Manager”似乎没有居中。我已经将网格元素制作成 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>
最佳答案
试试这个。
.pm {
grid-column: 2/6;
}
关于html - 如何在网格中居中放置文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58075448/