故障以Divs为中心？

Question

如果这是一个基本问题，我道歉，但我很难集中四个div。所有四个绿色div都有一个浮动，然后有一个包装div（蓝色）。我想将四个div居中，但让它们像这样对齐（在更大的分辨率下，它们不会沿着中间显示）。因此，当缩小屏幕大小时，div将在彼此之下浮动。

http://jsfiddle.net/qvu712tj/

#blog-wrapper {
  background-color: blue;
  width: 100%;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  align: center;
}
.blog-section {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px;
  float: left;
  padding: 5px;
}

<div id="blog-wrapper">
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
</div>

我希望这有意义，请有人帮忙吗？

Answer 1

试试这个：

.blog-section {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px 2.5%;
  float: left;
/* padding: 5px; */ 
}

Answer 2

使用百分比代替px进行边距和填充

.blog-section{
    background-color: green;
    height: 200px;
    width: 45%;
    margin: 1%;
    float: left;
    padding: 1.5%;

}

Answer 3

试试这个

.blog-section{
  background-color: green;
  height: 200px;
  width: 48%;
  margin: 12px 1%;
  float: left;
}