当前位置：文江博客话题详情

如何在偏移 div 的中心覆盖图像？

发布于 2024-10-20 07:32:59 字数 77 浏览 1 评论 0原文

我希望能够将一些图标集中在横幅上，该横幅位于已偏移的 div 中间。我不能使用绝对定位，因为它会将其居中但不会偏移。我怎样才能实现这一目标？

原文

分享到QQ

分享到微博

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

发布评论

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

谁的新欢旧爱 2024-10-27 07:32:59

可能 margin: auto; 有效吗？或者您还需要垂直居中吗？

编辑：
也许是这样的：

<div>
  <div style="width:208px; height: 58px; margin: auto;">
    <img src="some_image_somewhere.png" width="208" height="58" style="position:absolute;">
    <img src="some_image_somewhere.png" width="208" height="58">
  </div>
</div>

这显示了两个图像在顶部 div 的中心，但它并不漂亮（代码方面，我认为）。

might margin: auto; work? Or do you need vertical centering as well?

EDIT:
Maybe something along the lines of:

<div>
  <div style="width:208px; height: 58px; margin: auto;">
    <img src="some_image_somewhere.png" width="208" height="58" style="position:absolute;">
    <img src="some_image_somewhere.png" width="208" height="58">
  </div>
</div>

This shows both images over one another centered in the top div, but it's not pretty (code-wise, imo).

回复收藏 0 原文

烟若柳尘 2024-10-27 07:32:59

您需要将两者设置为绝对位置
外部 div 需要是相对的
还有外部 div 应该设置宽度（这样当您为图像容器指定完整宽度时，它会将其对齐到中间（因为您将 text-align: center 设置为需要居中的 div））。
每个图像都需要位于自己的 div 中，并具有绝对位置（z 顺序与代码中的相同，后面的图像位于顶部）。

代码：

<div style="width:300px; height: 100px; position: relative;">
<div style="position: absolute;"><img src="https://i.sstatic.net/1aBfM.png" width="300" height="100"></div>
<div style="position: absolute; width: 100%; text-align: center;"><img src="https://i.sstatic.net/DH3Qw.png" width="100" height="100"></div></div>

示例：http://jsfiddle.net/Y9PhP/

you need to set both to an absolute position
the outter div needs to be relative
also the outter div should have a width set (this way when you specify a full width to the image's container, it will align it to the middle (because you set a text-align: center to the div you need centered)).
every image needs to be in its own div with an absolute position (the z order is as it is in the code, the one after will be on top).

code:

<div style="width:300px; height: 100px; position: relative;">
<div style="position: absolute;"><img src="https://i.sstatic.net/1aBfM.png" width="300" height="100"></div>
<div style="position: absolute; width: 100%; text-align: center;"><img src="https://i.sstatic.net/DH3Qw.png" width="100" height="100"></div></div>

example: http://jsfiddle.net/Y9PhP/

回复收藏 0 原文