需要将 3 个对象对齐到屏幕中心

发布于 2024-12-29 17:18:14 字数 593 浏览 0 评论 0原文

我需要让图片 div 始终位于页面中央。
这是目前的结构。

HOLDER DIV
（位置：绝对；宽度：100%；）
第二分区
（位置：相对；宽度：2272px；边距：0 自动；）
图片 Div
（浮动：左）

如果第二个 div 宽度小于 1000px，则此代码有效，但我需要它为 2272。有谁知道如何解决此问题或以其他方式解决它？

谢谢

编辑好的，这是我想做的更多事情。该网站的宽度为 960px。然后我上面提到的 div 结构通过 z-index 位于站点下方。这两张图片需要位于主站点的两侧，一张在左边，一张在右边。所以 2272 的宽度是 2 张图片，网站所在的内边距是 960。这是该网站的图片。
http://cb.seddonmedia.com/RobertHillPhotography-Home-2.jpg

原文

分享到QQ

分享到微博

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

发布评论

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

梦巷 2025-01-05 17:18:14

尝试 - http://jsfiddle.net/q5WwW/。

position: relative;
    left: 50%;
margin-left: -1136px;

try - http://jsfiddle.net/q5WwW/.

position: relative;
    left: 50%;
margin-left: -1136px;

回复收藏 0 原文

断念 2025-01-05 17:18:14

css margin: 0 auto; 仅当所选元素小于其容器的总宽度时才有效。

为什么第二个 div 需要 2272px 宽？

如果您尝试居中对齐背景图像（我对您想要执行的操作的最佳猜测），您最好通过 css 应用图像并使用 background-position: center center< /code> 使其居中。

以下是有关 css 背景属性的更多信息。

回复收藏 0 原文

我ぃ本無心為│何有愛 2025-01-05 17:18:14

如果您不受通过 z 索引将图片放在内容后面的要求的限制，您可以使用 3 列 CSS 布局来解决这个问题吗？

#top{
clear: both;
padding: 1px;
}
#left{
float: left;
width: 656px;
}
#right{
float: right;
width: 656px;
}
#middle{
padding: 0px 656px 0px 656px;
width: 960px;
}
#bottom{
clear: both;
}

HTML 在概念上看起来像这样：

<body>
    <div id="top">TOP</div>
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
    <div id="middle">MIDDLE</div>
    <div id="bottom">BOTTOM</div>
</body>

还有其他方法可以在 CSS 中实现 3 列，例如：
完美的 3 列液体布局（百分比宽度）
或者
3 列 CSS 布局：固定宽度并居中

If you are not constrained by a requirement to put the pictures behind the content via z index could you use a 3 column CSS layout to address this?

#top{
clear: both;
padding: 1px;
}
#left{
float: left;
width: 656px;
}
#right{
float: right;
width: 656px;
}
#middle{
padding: 0px 656px 0px 656px;
width: 960px;
}
#bottom{
clear: both;
}

The HTML would look like this in concept:

<body>
    <div id="top">TOP</div>
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
    <div id="middle">MIDDLE</div>
    <div id="bottom">BOTTOM</div>
</body>

There are other ways to do 3 columns in CSS like:
The Perfect 3 Column Liquid Layout (Percentage widths)
or
3 Column CSS Layout: Fixed Width And Centered

回复收藏 0 原文