Question

好的，这是我正在处理的网站的链接。 http://danberinger.com/preview.html

我目前在自己的div（#messagebox）和自己的div（#picture）中的图片中有消息。这两个div都漂浮在左边。我将它们放在一个名为#intro_container的容器div中。我想把这个包含div的中心，但我遇到了麻烦。我已经尝试将边距设置为0和自动，但这不起作用。对于我正在尝试使用的不同级别的div，这必须是某种问题....

非常感谢任何帮助！

Answer 1

在#intro_container容器上设置宽度，否则margin: 0 auto;将无效。

Answer 2

要使0自动起作用，必须指定宽度。

您可以将所有内容放在容器div中，例如宽度为900px margin 0 auto，或者您可以将这些样式简单地应用于intro容器。

现在你的css正在将所有内容缩放到视口宽度，因此float left将图片发送到intro_container的宽度，该宽度没有定义的宽度。

另请注意，您可以将您的ID直接应用于图片！不需要在div中包装它。在语义上对元素进行样式化是一种很好的做法。

Answer 3

有时将这样的事情集中在一起很好：

<html>
<head>
</head>
<body>
<div style="position:relative;width:400px;height:400px;background-color:green">

  <div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red">
here attribute 'left' is half of this container width
  </div>
</div>
</body>
</html>

始终有效

居中容器中的多个浮动div

3 个答案: