我需要帮助将文本居中 CSS 网格

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 网格

I need help centering text in the center of CSS Grid

html

css

gridview