центрирование ряда элементов в контейнере - PullRequest
Новая
       6

центрирование ряда элементов в контейнере

0 голосов
/ 17 февраля 2019

У меня есть небольшая проблема, чтобы центрировать мои div в контейнере.Я перепробовал все, что мог найти, но проблема все еще существует.Цель состоит в том, чтобы поместить зеленые прямоугольники в середину желтого.Это должно быть отзывчивым.Основной проблемой является плавающая коробка, которая не центрируется.Я также не понимаю, почему желтое пространство все еще существует в маленьком представлении.Зеленая рамка должна быть над всем местом (пример возлюбленной выглядит странно).

Спасибо за вашу помощь 

body,html{
  width:100%;
  height:100%;

}

#hans{
  background:red;
  width:50rem;
  height:28%;
  display:table;


}

.test-center{
  height:30rem;
  width:90vw;
  display: block;
  margin: 0 auto;
  background: yellow;
}


.content-block{
  background: green;
  width:45rem;
  height:90%;
  margin-left:1%;
  5margin-top: 8rem;
  display: inline-block;
  5padding-top:2rem;

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">

    <link href="test.css" rel="stylesheet">
    <!--TzITT-->
    <title>Test right site</title>
</head>

<body>

  <div class="container" id="hans">
    <div class= "test-center">
    <div class = "content-block">
      <p>fwfwf</p>
    </div>
    <div class = "content-block">
      <p>fwfwf</p>
    </div>
    <div class = "content-block">
      <p>fwfwf</p>
    </div>
  </div>
  </div>



<div class = "footer">
</div>

</body>

</html>

} Кликни Меня для картинки !!!Thx

1 Ответ

0 голосов
/ 17 февраля 2019 

body,html{
  width:100%;
  height:100%;

}

#hans{
  background:red;
  width:50rem;
  height:28%;
  display:table;


}

.test-center{
  height:30rem;
  width:90vw;
  display: block;
  margin: 0 auto;
  background: yellow;
  display:flex;
  justify-content:center;
  align-items:center;
}


.content-block{
  flex:1;
  background: green;
  height:90%;
  display: inline-block;
  margin:1%;
}

@media screen and (max-width:728px){
  .test-center {
    flex-direction:column;
  }
  
  .content-block{
    width:100%;

  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">

    <link href="test.css" rel="stylesheet">
    <!--TzITT-->
    <title>Test right site</title>
</head>

<body>

  <div class="container" id="hans">
    <div class= "test-center">
    <div class = "content-block">
      <p>fwfwf</p>
    </div>
    <div class = "content-block">
      <p>fwfwf</p>
    </div>
    <div class = "content-block">
      <p>fwfwf</p>
    </div>
  </div>
  </div>



<div class = "footer">
</div>

</body>

</html>
...