Моя сетка не помещает элементы посередине - PullRequest
Новая
       22

Моя сетка не помещает элементы посередине

0 голосов
/ 21 июня 2020

Первый пост здесь, не стесняйтесь сказать мне, если я что-то пропустил (например, тип презентации или что-то еще)

Я разработчик на тренинге, у меня был свой первый сайт через неделю, я потерпел неудачу , На этой неделе я тренируюсь, чтобы делать это правильно, но как бы я ни старался, мне кажется, что я не могу разместить свою сетку в центре моей страницы, я поставил те же отступы, что и остальные мою страницу, я попробовал использовать 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€</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€</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€</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€</p>
            </div>
        </article>
    </section>
</main>

А вот и мой S CSS: 

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 квадрата с боксерскими перчатками):

Спасибо, что прочитали, надеюсь, я достаточно ясно понял, надеюсь, я помогу кому-то позже, когда у меня будут знания!

(извините, мне нужно удалить фотографии, потому что они все еще используются для экзамена на моем школа.)

1 Ответ

0 голосов
/ 21 июня 2020

Попробуйте использовать: 

article {
    margin: auto;
}

Это автоматически центрирует эти элементы в каждой ячейке сетки.

...