时间戳

首页 > 解决方案 > 将一排 div 居中在容器中

html - 将一排 div 居中在容器中

问题描述

我有一个小问题将我的 div 放在一个容器中。我尝试了所有我能找到的东西，但问题仍然存在。目标是将绿色盒子放在黄色盒子的中间。它应该是响应式的。主要问题是浮动框没有居中。我也不明白为什么黄色空间仍然存在于小视图中。绿色框应该在整个地方（示例 belove 看起来很奇怪）。

谢谢你的帮助

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>

}点击我的图片！谢谢

标签： htmlcssresponsive

解决方案

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>

推荐阅读