Question

我在文本对齐方面遇到问题。

在HTML文件中，我创建：

<div class="page">
   <div class="logo"> </div>
       ... and ect...
 </div>

在创建的CSS中：

body {

    background-color: #ffffff;
    overflow: hidden;
    margin: 0;

}

.page {

    display: grid;
    grid-template-areas:
        "... ... ... ... ... ... ... ..."
        "... logo img1 img2 info info info ..."
        "... logo img1 img2 img3 img3 img3 ..."
        "... img4 apie img2 img3 img3 img3 ..."
        "... img5 img5 foto img7 img8 img9 ..."
        "... img5 img5 foto img7 kon img9 ..."
        "... pas pas img6 img7 kon img9 ..."
        "... ... ... ... ... ... ... ...";
    grid-template-columns: [c1] 5px [c2] 2fr [c3] 2fr [c4] 3fr [c5] 1fr [c6] 1fr [c7] 1fr [c8] 5px [c9];
    grid-template-rows: [r1] 5px [r2] 1fr [r3] 1fr [r4] 2fr [r5] 2fr [r6] 2fr [r7] 2fr [r8] 5px [r9];
    grid-gap: 5px;
    height: 100vh;

}

问题是当我想在网格区域中水平和垂直对齐文本并使用align-self，align-content，align-item或justify-self，justify-content，justify-item为中心时，我将文本居中无论水平还是垂直，但其余的网格区域，背景或边框都位于该文本周围，而不是在所有网格区域中。当我使用拉伸时，不居中功能背景或边框覆盖所有网格区域，但是文本不在居中。谁能告诉我如何覆盖所有网格区域并在中间放置文本？

CSS_grid中的文本对齐：区域

0 个答案: