CODEWITHSUNDEEP
htmlcssresponsive
evev
evev

Reputation: 9

centering a row of divs in a container

I have a little problem to center my divs in a container. I tried every thing I could find but the problem still exists. The goal is to place the green boxes in the middle of the yellow one. It should be responsive. The main issue is the floating box which isn't centering.

I also don't get why the yellow space still exist in the small view. The green box should be over the whole place (the example below looks weird).

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>

Klick Me for picture !!! Thx

Upvotes: 0

Views: 53

Answers (1)

doğukan
doğukan

Reputation: 27381

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>

Upvotes: 1

Related Questions