Question

请看一下http://snowclub.gr/test_forum2/index.php?app=ccs&module=pages&section=pages&folder=&id=19，我正试图找到一种方法来对每个div的原始中心（左侧浮动和包含网络摄像头实时反馈）。网络摄像头div具有相同的尺寸和尺寸。对于不同的显示尺寸（自然地）显示不同数量的div。但我希望每个原始的凸轮div都居中，无论原始中的div如何（取决于屏幕尺寸）。我还希望css解决方案对以下内容有效：（IE7及更高版本，Chrome，Firefox，Safari）。谢谢！

Answer 1

通常，a：

.centered {
  margin-left: auto;
  margin-right: auto;
}

应该有效。但是，您的HTML有width: 100%。我尝试了几个变体，唯一一个产生一些结果的变体（如果你想保留“.left”类）意味着要在.webcam类中添加margin-right:auto。

如果删除网络摄像头中的.left类，它应该可以工作（它在我的chrome实例上“即时”）。

Answer 2

将所有div放入包装器中，并使用margin:0 auto;设置其他边距填充等的宽度并使其浮动，从而使包装器居中。或者将包装器设置为position:relative;然后绝对定位三个div

Answer 3

如果您删除了网络摄像头包装器上的float: left;，则它似乎可以像您所描述的那样工作。但是，在IE7中，它不起作用。这可能是因为您正在使用内联块，为了在IE7中工作，需要将以下内容添加到#webcams .webcam

zoom: 1;
*display: inline;

这可能会解决您的问题。如果没有，至少IE7现在将正确渲染显示块。

浮动div：align：middle

3 个答案: