Как центрировать эти поля в CSS при изменении размера страницы? - PullRequest
Новая
       1

Как центрировать эти поля в CSS при изменении размера страницы?

0 голосов
/ 06 марта 2020

У меня есть следующие поля (статьи)

enter image description here

Когда я пытаюсь изменить размер страницы, она выглядит так:

enter image description here

Я бы хотел, чтобы он автоматически центрировался при изменении размера окна, чтобы избежать этого огромного разрыва с правой стороны, НО он должен быть в том же формате, что и сейчас. По сути, просто переместите всю группу в центр, не центрируя отдельные поля, так как я хотел бы, чтобы они плавали влево, как показано на рисунке.

РЕДАКТИРОВАТЬ: Это то, что я Я после:

enter image description here

Вот мой текущий css: 

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.container {
    width: 90%;
    height: 100%;
    overflow: hidden;
    background: skyblue;
    margin: auto;
    padding: 20px;
}

.container article {
    float: left;
    width: 250px;
    height: 250px;
    background: blue;
    margin: 25px
}

и мой html: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Shop</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="container">
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
        </div>
    </body>
</html>

Ответы [ 2 ]

2 голосов
/ 06 марта 2020

Используйте флекс, Люк 

display: flex;
flex-wrap: wrap;
justify-content: center;


* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.container {
    width: 90%;
    height: 100%;
    overflow: hidden;
    background: skyblue;
    margin: auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.container article {
    width: 250px;
    height: 250px;
    background: blue;
    margin: 25px
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Shop</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="container">
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
        </div>
    </body>
</html>
0 голосов
/ 06 марта 2020

@ ne1410s * ответ работает, но не оборачивает прямоугольники слева, поэтому вместо этого я решил использовать CSS сетки:

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="grid-container">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>  
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>  
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
            <div class="grid-item">10</div>
            <div class="grid-item">11</div> 
            <div class="grid-item">12</div> 
            <div class="grid-item">13</div> 
            <div class="grid-item">14</div> 
        </div>
    </body>
</html>

CSS: 

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    grid-gap: 40px;
    justify-content: center;
    padding: 40px 10px 40px 40px;
    background-color: #2196F3;
}
.grid-item {
    width: 200px;
    height: 200px;
    background-color: #FFFFFF;
    font-size: 30px;
    text-align: left;
}

ПРИМЕЧАНИЯ:

  • grid-template-columns: repeat(auto-fill, 200px); 200px - ширина окна.
  • justify-content: center; для центрирования контейнера вместе с ящиками. Это работает, но оставляет коробки немного смещенными от центра к правой стороне. Чтобы компенсировать это, я добавил 10px отступ с правой стороны: padding: 40px 10px 40px 40px. Значения могут отличаться.

Рабочая jsfiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...