居中Div网格（动态生成） [英] Center a grid of Divs (dynamically generated)

问题描述

我已经尝试过来自SO和其他来源的每一个技巧，但对于我的生活，我无法得到这个盒子的中心网格。我试图让整个网格居中在页面上。

这里有一个它的外观小提琴（将预览面板向左拖出一点所以你至少得到两列。）： http://jsfiddle.net/valgaze/0w77ccvj/1/

框的网格是内联块。通过强加利润率来达到这个目的有点难以实现，但由于种种原因，这是不可取的。必须有一些我想念的东西，我会非常感谢任何见解！

这是一个简化版本：

  #gridArea {background-color：＃FFF300;显示：-moz-inline-stack;显示：inline-block;边框式：虚线; border-width：1px;保证金：0汽车; } .wrap {text-align：center;} .card {background：＃000;填充：19px 16px;向左飘浮; margin-right：10px; margin-bottom：18px;宽度：350像素;高度：100像素;显示：内联; text-align：center; }  

<！--- Center this grid-- - >< div class =wrap> < div id =gridArea> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < div class =card>这里的数据< / div> < / div>< / div>

解决方案

.card {display：inline-block}

然后删除 float：left; on .card

链接到JSFiddle

I've tried every trick from SO and other sources but for the life of me I cannot get this darn grid of boxes to center. I'm trying to get the entire grid to be centered on the page.

Here's a fiddle of what it looks like (drag out the preview panel a bit to the left so you get at least two columns.): http://jsfiddle.net/valgaze/0w77ccvj/1/

The grid of boxes are inline-block. There is a hacky way to do this by imposing margins but that's undesirable for numerous reasons. There must be something I'm missing and I would be much obliged for any insights!

Here's a simplified version:

 #gridArea{
  background-color:#FFF300;
  display: -moz-inline-stack;
  display: inline-block;
  border-style: dotted;
  border-width: 1px;
  margin: 0 auto;   
}

.wrap{
  text-align: center;
}
      
.card{
  background:#000;
  padding:19px 16px;
  float:left;
  margin-right: 10px;
  margin-bottom: 18px;
  width:350px;
  height:100px;
  display: inline;
  text-align: center;

     

}

<!---Center this grid---->
<div class="wrap">
  <div id="gridArea">

          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>
          <div class="card">HERE'S DATA</div>


  </div>
</div>

解决方案

Looks like you'll need the following:

 #gridArea{ text-align: center; }
.card {display: inline-block }

and then remove float: left; on .card

Link to JSFiddle

这篇关于居中Div网格（动态生成）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！