Question

我无法在垂直和水平方向的网格中心对齐文本，因为我尝试过的所有操作似乎都无效，因此我想知道代码的问题或应该怎么做。

我尝试使用justify-items: center，align-items: center甚至place-items: center center；

这是我的全部内容，希望您可以尝试一下，看看有什么问题。

<title> Learning Grid </title>


<style> 


    body {
        color: #fff;
        font-family: sans-serif;
        text-align: center;
    }


    #content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-gap: 10px;
        max-width: 960px;
        margin: 0 auto;  
    }



    #content > * {
        padding: 30px;
        font-size: 30px;

    }


    header {
        grid-column: 1/13;
        text-align: center;
        background-color: hotpink;
    }


     main {
        grid-column: 4/13;
        grid-row: 2/4;
         background-color: darksalmon;
    }



      aside {
        grid-column: 1/4;
        grid-row: 2/3;
          background-color: cadetblue;
    }



     nav {
        grid-column: 1/4;
        grid-row: 3/4;
         text-align: center;
         font-size: 30px;
         background-color: aquamarine;
    }



     section {
        grid-column: 1/13;
        grid-row: 4/6;
         background-color: coral;
    }


    footer {          
        grid-column: 1/13;
        grid-row: 6/7;
        background-color: cornflowerblue;
    }


</style>


</head>


<body>


    <div id="content"> 


        <header> Header </header>


        <main> Main </main>


        <section>Section </section>


        <aside>Aside </aside>


        <nav> Nav </nav>


        <footer> Footer</footer>


    </div>


</body>

Answer 1

要对齐文本，可以使用line-height方法，但是响应速度不是很好。

由于您已经拥有grid布局，因此可以保持相同的想法并添加一个辅助元素，例如<span>。这样做，可以给您更多选择以显示实际文本。

以下是新HTML外观的示例：

<main>
    <span>Main</span>
</main>

那的CSS将是：

main {
    grid-column: 4/13;
    grid-row: 2/4;
    background-color: darksalmon;
    display: grid;
}

main > * {
    margin: auto;
}

Answer 2

要使文本居中对齐，只需使用以下属性：display: flex; align-items: center; justify-content: center;

    body {
        color: #fff;
        font-family: sans-serif;
        text-align: center;
    }
    #content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-gap: 10px;
        max-width: 960px;
        margin: 0 auto;  
    }
    #content > * {
        padding: 30px;
        font-size: 30px;
    }
    header {
        grid-column: 1/13;
        text-align: center;
        background-color: hotpink;
    }
    main {
        grid-column: 4/13;
        grid-row: 2/4;
        background-color: darksalmon;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    aside {
        grid-column: 1/4;
        grid-row: 2/3;
        background-color: cadetblue;
    }
    nav {
        grid-column: 1/4;
        grid-row: 3/4;
        text-align: center;
        font-size: 30px;
        background-color: aquamarine;
    }
    section {
        grid-column: 1/13;
        grid-row: 4/6;
        background-color: coral;
        display: flex;
        align-items: center;
        justify-content: center;
    }
	footer {          
        grid-column: 1/13;
        grid-row: 6/7;
        background-color: cornflowerblue;
    }

<div id="content"> 
        <header> Header </header>

        <main> Main </main>

        <section>Section </section>

        <aside>Aside </aside>

        <nav> Nav </nav>

        <footer> Footer</footer>
</div>

Answer 3

您可以使用 Bootstrap 类，例如：

<main class="text-center justify-content-center align-items-center"> Main </main>

或通过 CSS

对齐文本

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

我需要在CSS网格中心居中放置文本的帮助

3 个答案: