Html 图像大小更改时相对于图像定位文本

我正试图想出一个聪明的方法来处理网页的一部分，其中的图像将与不同的图像交换（宽度不同，最大宽度为620px），并且文本标题绝对位于其上方。我希望文本的绝对位置基于图像的宽度，而不是相对定位容器的宽度

我想可能是背景图像，而不是图像本身，但我必须处理这样一个事实，即它是一个带有背景图像的空div，所以我必须硬编码一个高度，这不起作用，因为其中一些图像会比其他图像高

---

你们能想到的任何解决方案都将不胜感激。谢谢

我用更多的CSS提出了前面的答案

西蒙；加芬克尔
​

.imageholder{
位置：相对位置；
浮动：左；
}
.标题{
位置：绝对位置；
排名：0；
左：0；
右：0；
字体系列：Helvetica，无衬线；
字号：1em；
背景：rgba（0,0,0,0.5）；
颜色：#fff；
填料：1米2米；
}

​

---

请参阅以获取参考。

我不确定是否遵循了100%，但以下是如何做我认为您正在尝试做的事情

使用“相对位置”创建容器，设置宽度和高度，并将“溢出”设置为“隐藏”：

.container-outer {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

接下来，在其内部创建一个内部容器，该容器仅具有position:absolute

.container-inner {
  position: absolute;
}

最后，将覆盖文字样式创建为100%宽度，水平居中（或按您希望的方式放置）

下面是带有示例的JSFIDLE：

---

祝你好运

如果制作包含图像的div

内联块

，其宽度将根据其内容（即图像）的大小进行缩放

容器大小调整正确后，您可以使用带有

文本对齐：居中

的包装器将其他子元素（如标题）居中，或者不使用包装器，并且左右边距的值为

自动

这里有一个例子：（用丑陋的边框和背景来显示物品的位置）

单击图像以调整其大小，并看到标题仍然居中

---

请注意，如果标题可能比图像大，则可能会扩大容器div的宽度，从而偏离中心对齐。您可以通过设置

position:absolute来避免这种情况；左：0；右：0，或者给它一个宽度，你知道它总是比你的图像小。
我不知道我是否考虑过这个问题，但这里有一个方法。如果您特别不想将标题与包装div对齐，那么还需要考虑
imagesLoaded
事件（）。否则，如果未加载，您的
img
宽度将为0，或者之前加载的
img
宽度将在其中（除非您返回到它）

看看这个，它显示了一个固定宽度的包装div和以它为中心的标题

.overlay {
  position: absolute;
  text-align: center;
  width: 100%;
  margin: 0;
}