Контейнер CSS Grid не центрирован в окне просмотра браузера - PullRequest
Новая
       0

Контейнер CSS Grid не центрирован в окне просмотра браузера

0 голосов
/ 22 января 2019

Я определил сетку CSS со следующими свойствами. Однако я обнаружил, что весь контейнер сетки не центрирован (по вертикали и горизонтали) относительно окна моего браузера в настольном браузере Chrome (Macbook Pro 15 "Дисплей).

Может ли кто-нибудь помочь мне с тем, как центрировать весь контейнер сетки по центру области просмотра браузера? 

html { 

    background: url('images/cbg.png') no-repeat center center fixed; 
    -webkit-background-size: cover; /* Safari */
    -moz-background-size: cover; /* Mozilla Firefox */
    -o-background-size: cover; /* Opera Browser */
    background-size: cover; /* Chrome */


    text-rendering: optimizeLegibility;
    text-align: center;
    }

body {
    box-sizing: border-box;
    min-height: 100%;
    margin: 20px;

    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center; 
}

.wrapper {
  display: grid;

  grid-template-columns: repeat(12, 1fr); 
   /* grid-template-columns: 1fr; */
  grid-gap: 5px;

}

/ **** Обновлено с элементами сетки, которые входят в контейнер сетки CSS .wrapper **** / 

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 0px;
  font-size: 150%;
}

.box-txt {
  background-color: #fff;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 100%;
  border: 1px solid black;
}

.header1
    {

        grid-column-start: 1;
        grid-column-end: 12;
        grid-row-start: 2;
        grid-row-end: 3; 
        text-align: center;
        height: 80px;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
    }

.footer{
        grid-column-start: 1;
        grid-column-end: 12;
        grid-row-start: 5;
        grid-row-end: 6;
        text-align: center;
        height: 120px;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
    }

.imgbox {
        grid-column-start: 6;
        grid-column-end: 12;
        grid-row-start: 3;
        grid-row-end: 4;
        height: 500px;
    }

    .imgbox > img {
        width: 100%;
        height:100%;
        display: block;
        object-fit: cover;
        border-radius: 5px;
        }

    .b {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .c {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .d {
        grid-column-start: 7;
        grid-column-end: 12; 
        grid-row-start: 4;
        grid-row-end: 5;
    }

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Я думаю, это то, что вам нужно: 

body {
    box-sizing: border-box;
    margin: 20px;
    width:100%;
    height: 100vh;

    display:flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
  display: grid;

  grid-template-columns: repeat(12, 1fr); 
   /* grid-template-columns: 1fr; */
  grid-gap: 5px;

}
<body>
  <div class="wrapper">
    <div class="col-1">1</div>
    <div class="col-1">2</div>
    <div class="col-1">3</div>
    <div class="col-1">4</div>
    <div class="col-1">5</div>
    <div class="col-1">6</div>
    <div class="col-1">7</div>
    <div class="col-1">8</div>
    <div class="col-1">9</div>
    <div class="col-1">10</div>
    <div class="col-1">11</div>
    <div class="col-1">12</div>
  </div>
</body>

Дайте мне знать, если вам нужна дополнительная помощь :)

0 голосов
/ 22 января 2019

Попробуйте использовать flex в этом месте.

Обертке вы можете дать 

display:flex;
justtify-contents:center;
align-items: center;

Надеюсь, что это работает

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

Похожие темы

...