Question

我正在处理的网格有问题。基本上我正在使用div创建一个网格。所以你可以想象，有一个容器div，里面装满了行和单元格。我似乎可以弄清楚如何使细胞居中。对于我的容器div，我使用了固定宽度的自动左右边距，如下所示。

#container {
     margin: 0 auto;
     width:960px;
} 

#container .row { 
    height: 220px; 
    margin-bottom:20px; 
} 

#container .row .cell { 
    float: left; 
    margin: 0 20px 20px 20px; 
    height: 170px; 

}

这似乎很好，但我想要的是让容器中的div（s）居中，所以例如，如果我在容器div中只有一个单元格（div），它应该在容器div中居中

Answer 1

而不是浮动“单元格”使它们成为内联块，然后它们将像文本一样居中

#container {
     margin: 0 auto;
     width:960px;
     border: 14px solid #000;
} 

#container .row { 
    height: 220px; 
    margin-bottom:20px; 
    background: #cfc;
    text-align: center; /** add this **/
} 

#container .row .cell { 
    /*float: left;*/  /* remove this */
    display: inline-block; /* add this */
    margin: 0 20px 20px 20px; 
    height: 170px; 
    background: #dad;
}


/* IE7 and below needs the following rule to make inline-block work on block level element - disclaimer: this is a hack you can put this in a conditional comment for `lte IE 7` without the '!ie7' bit if you don't like hacks */
#container .row .cell { display: inline !ie7;}

Answer 2

你不能把那个div居中，因为你在这里使用浮动。

如果你向左或向右浮动任何div

然后它无法移动到父div的中心。

如果你想创建网格，你也可以使用span或任何其他内联元素而不是块级元素

网格问题（Div）

2 个答案: