html - 我的网格不会将元素放在中间

问题描述

第一次在这里发帖，如果我错过了什么（比如演示类型或其他），请随时告诉我

我是一名培训开发人员，我在 1 周后完成了我的第一个网站，但我失败了，我本周正在训练做正确的事，但无论我多么努力，似乎我无法获得我的网格放置在我的页面的中心，我确实在页面的其余部分放置了相同的填充，我尝试了，flexbox但让它变得更糟......

我将向您展示我的代码，请告诉我或提示我做错了什么。

<main>

    <!-- Banniere Top -->
    <header>
        <img src="img/header-page-catalogue.png" alt="box">
    </header>
    <!-- Banniere Top -->

    <section>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€&lt;/p>
            </div>
        </article>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€&lt;/p>
            </div>
        </article>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€&lt;/p>
            </div>
        </article>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€&lt;/p>
            </div>
        </article>
    </section>
</main>

这是我的 SCSS：

body{
    font-size: 14px;
    header{
        display: flex;
        justify-content: space-between;
        height: 100%;
        padding-left: 17%;
        padding-right: 17%;
        padding-top: 2%;
        section{
            display: inline-block;
            align-self: flex-end;
        }
        nav{
            div{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 10px;
                margin-right: 0;
                padding: 10px 50px;
                border: 1px;
                border-style: solid;
                background-color: lightgrey;
                img{
                    vertical-align: middle;
                }
            }
            p{
                text-align: end;
                font-size: 1.2em;
                margin-top: 0;
                margin-bottom: 0;
            }
            li{
                list-style: none;
                display: inline;
                margin-right: 15px;
                a{
                    text-decoration: none;
                    &:first-child{
                        padding-right: 30px;
                    }
                    &:last-child{
                        padding-left: 30px;
                    }
                }
            }

        }
    }
}

span{
    color: yellow;
}

main{
    background-color: darkslategrey;
    padding-left: 17%;
    padding-right: 17%;
    header{
        padding-left: 0;
        padding-right: 0;
    }
    section{
        display:grid;
        grid-template-columns: 400px 225px;
        grid-template-rows: 500px 200px;
        justify-content: center;
    }
}

这应该看起来像这样（带有拳击手套的 4 方块）：

感谢您的阅读，希望我已经足够清楚了，希望我以后有知识时能帮助别人！

（对不起，我必须删除照片，因为它们仍然在我的学校用于考试。）

标签： htmlsass

html - 我的网格不会将元素放在中间

问题描述

解决方案

推荐阅读