我可以根据离散的单元动态地调整div的大小并仍然居中吗？

Question

这就是问题所在:我有一个我正在工作的网站，根据用户选择的内容，将弹出不同数量的框，高80px，宽200px，当前设置为浮动:左。这些框包含在一个div中，该div基本上是屏幕的整个宽度减去大约1%的边距。

因此，目前它们都填满了方框，并根据屏幕大小，占据了一个高度和宽度可变的网格。问题是，如果屏幕大小使包含框，比如说，700px宽，那么你最终会得到每行3个框，右边有一个非常大的边距。

我想要做的是将包含框内的方框网格居中，以便左边距和右边距相等。我怀疑这是不可能做到的，因为这意味着包含框需要通过查看用户窗口的大小以及其子窗口的大小来设置其大小。用javascript做这件事很容易，但如果可以的话，我不想这么做。如果确实不可能，那么我将简单地编写脚本，让非js用户看到一组左对齐的框。

编辑:好的。相关的标记位：

<div class="itemcontainer">
<?php
  ... some php code to generate a query and run it
  while ($row = mysql_fetch_array ($result)) {
        echo '<div class="itembox">'.$row['comname'].'<br<i>'.
              $row['sciname'].'</i></div>';
   }
?>      
</div>

为了清晰起见，css去掉了边框/颜色等：

.itemcontainer {位置:相对；宽度:98%；左:1%；} .itembox {浮动:左；边距:5px；高度:80px；宽度:200px；}

正如您所看到的，它当前的设置使得包含框基本上固定为具有1%边距的窗口宽度。我想做的是让它包含一些离散的实施例..这将根据屏幕的宽度而变化。我想我可以提供一个在线版本，但目前它在我的计算机上，其本机服务器故意与大的坏互联网隔离。:-D

Answer 1

删除float:left并将auto放在该子对象的中心：

.itembox { margin:5px auto; height:80px; width:200px;}

删除浮动将阻止额外的子元素在文档中向上移动-使“一行中的3”成为不可能的(div元素强制换行，除非使用' float‘或'position’将它们移出布局层次结构)。

如果您想要“一行中的3”，您可以将.itembox更改为内联块元素，并将居中应用于其父元素：

.itemcontainer { text-align:center; ... }
.itembox { display:inline-block; margin:5px; .... } /* a 700px wide viewport should allow for 3 per row */

这里有一些你应该考虑的注意事项：http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85%29.aspx

无论哪种方式，在“.itembox”上使用“float”可能会让你在这一点上感到沮丧。

Answer 2

您可以使用

.itemcontainer {
    display: table;
    margin: auto;
}

display:table根据内容缩小容器的大小(就像表格一样)，边距: auto使左右边距相等。