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

Question

问题是:我有一个正在开发的网站，根据用户的选择，会弹出不同数量的框，80 像素高，200 像素宽，当前设置为 float :左。这些框包含在一个 div 中，该 div 基本上是屏幕的整个宽度减去大约 1% 的边距。

所以目前它们都填满了方框，并且根据屏幕尺寸，占据了一个可变高度和宽度的网格。问题是，如果屏幕尺寸使包含框宽度为 700 像素，那么您最终每行有 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 {position:relative;宽度:98%；左:1%；}.itembox { float :左;边距:5px；高度:80px；宽度:200px；

如您所见，当前设置为使包含框基本固定为窗口宽度并留有 1% 的边距。我想要做的是让它拥抱离散数量的元素框.. 这将根据屏幕的宽度而有所不同。我想我可以提供一个在线版本，但目前它在我的计算机上，其 native 服务器有意与糟糕的互联网隔离开来。 :-D

Answer 1

删除 float:left 和 auto 使 child 居中:

.itembox { margin:5px auto;高度:80px；宽度:200px;}

删除 float 将阻止其他子元素在文档中向上移动 - 使“三行”成为不可能(div 元素强制换行，除非使用“float”或“position”将它们移除布局层次结构)。

如果你想要“3-in-a-row”，你可以将 .itembox 更改为 inline-block 元素并对其父元素应用居中:

.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' 很可能会导致您此时的大部分挫败感。