将多个浮动 div 置于容器内居中

发布于 2024-08-18 04:51:15 字数 346 浏览 7 评论 0原文

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

我目前在其自己的 div(# messagebox）和其自己的 div 中的图片（#picture）。这两个 div 都向左浮动。我将它们放在一个名为 #intro_container 的容器 div 中。我想将这个包含 div 居中，但遇到了麻烦。我尝试将边距设置为 0 和自动，但这不起作用。这一定是我尝试使用的不同级别的 div 数量存在某种问题......

任何帮助将不胜感激！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷默言语 2024-08-25 04:51:15

设置 #intro_container 容器的宽度，否则 margin: 0 auto; 将不起作用。

回复收藏 0 原文

￠好甜 2024-08-25 04:51:15

要使 0 auto 工作，您必须指定宽度。

您可以将所有内容放入容器 div 中，例如 width 900px margin 0 auto，或者您可以简单地将这些样式应用于介绍容器。

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

另请注意，您可以将您的 ID 直接应用于图像！无需将其包装在 div 中。按语义设置元素样式是一种很好的做法。

回复收藏 0 原文

︶葆Ⅱㄣ 2024-08-25 04:51:15

有时将事情集中在这样的中心是好的：

<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>

始终工作

sometimes it's good to center things like that:

<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>

always working

回复收藏 0 原文

~没有更多了~