如何在网格列中居中网格项目？

Question

我正在为我的浏览器建立一个基本主页。我有4个类别的链接，因此我将它们全部放在一个网格中以轻松对齐它们。我能够做到这一点，但是网格项目并未在每列中居中。然后，我尝试将网格项居中，但是没有用。我也在使用jQuery。这是我的代码：

<style>
    html,
    body {
        background-color: #53a8ed;
        color: white;
        font-family: 'Dosis', sans-serif;
        letter-spacing: 2px;
        font-weight: bolder;
        width: 100%;
    }

    #title {
        margin-top: 125px;
        text-align: center;
    }

    #content {
        text-align: auto;
        margin: 0 10%;
        width: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-gap: 15px;
    }

    .contentListWithHeader {
        border: 2px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contentHeader {
        text-align: auto;
        position: relative;
        top: 0%;
    }

    #school {
        grid-column: 1/4;
        grid-row: 1/1;
    }

    #entertainment {
        grid-column: 2/4;
        grid-row: 1/1;
    }

    #programming {
        grid-column: 3/4;
        grid-row: 1/1;
    }

    #projects {
        grid-column: 4/4;
        grid-row: 1/1;
    }

    .list {
        display: none;
    }
</style>

<h1 id="title">Home</h1>
<div id="content">
    <div id="school" class="contentListWithHeader">
        <h3 class="contentHeader">School</h3>
        <div id="schoolList" class="list">
            <ul>
                <li><a href="https://app.schoology.com/home">Schoology</a></li>
                <li><a href="https://drive.google.com/drive/my-drive">Google Drive</a></li>
                <li><a href="https://plusportals.com/gmhs">Plus Portals</a></li>
                <li><a
                        href="https://owl.purdue.edu/owl/research_and_citation/mla_style/mla_formatting_and_style_guide/mla_formatting_and_style_guide.html">MLA
                        Citation</a></li>
            </ul>
        </div>
    </div>
    <div id="entertainment" class="contentListWithHeader">
        <h3 class="contentHeader">Entertainment</h3>
        <div id="entertainmentList" class="list">
            <ul>
                <li><a href="https://www.youtube.com/">Youtube</a></li>
                <li><a href="https://www.netflix.com">Netflix</a></li>
            </ul>
        </div>
    </div>
    <div id="programming" class="contentListWithHeader">
        <h3 class="contentHeader">Programming</h3>
        <div id="programmingList" class="list">
            <ul>
                <li><a
                        href="">cPanel</a>
                </li>
                <li><a
                        href="">NameCheap</a>
                </li>
                <li><a href="https://github.com/Gbillington1">Github</a></li>
                <li><a
                        href="https://www.khanacademy.org/profile/grahamhbillington/assignments/teacher/kaid_66866897972006194384950/class/4584679721369600">Khan
                        Academy</a></li>
                <li><a href="https://www.udemy.com/course/complete-web-developer-course/">uDemy</a></li>
            </ul>
        </div>
    </div>
    <div id="projects" class="contentListWithHeader">
        <h3 class="contentHeader">Projects</h3>
        <div id="projectsList" class="list">
            <ul>
                <li><a>something</a></li>
            </ul>
        </div>
    </div>
</div>

<script>

    $(document).ready(function () {
        $("#school").hover(function () {
            $("#schoolList").slideToggle("fast");
        });
        $("#entertainment").hover(function () {
            $("#entertainmentList").slideToggle("fast");
        });
        $("#programming").hover(function () {
            $("#programmingList").slideToggle("fast");
        });
        $("#projects").hover(function () {
            $("#projectsList").slideToggle("fast");
        });
    });

</script>

Answer 1

如果您想使用align-items: center;，则必须使用此CSS来网格化容器。如果您想使用align-self: center;使用网格容器的项目您可以在这篇精彩的文章https://css-tricks.com/snippets/css/complete-guide-grid/]中了解有关CSS网格的更多信息