Как я могу центрировать элементы сетки в столбцах сетки? - PullRequest
Новая
       3

Как я могу центрировать элементы сетки в столбцах сетки?

0 голосов
/ 10 января 2020

Я создаю основную c домашнюю страницу для своего браузера. У меня есть 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>

1 Ответ

1 голос
/ 10 января 2020

Если вы хотите использовать align-items: center;, вы должны использовать это CSS для сетки контейнера. Если вы хотите использовать элементы сетки с помощью align-self: center;, вы можете узнать больше о CSS сетке в этой замечательной статье https://css-tricks.com/snippets/css/complete-guide-grid/

...