Html CSS在图像上水平对齐文本

我不知道这是否可能，但可变文本长度的

是否可能在图像上水平对齐？其中一个问题是，我希望

有一个背景色，背景色块应该与图像重叠

我尝试将

设置为

显示：内联块

，但它似乎没有水平对齐。如果你不想看小提琴，下面是代码（如果可能的话，这里的HTML应该保持不变）

代码（）：

#包装器{
宽度：100%；
}
.txt{
文本对齐：居中；
保证金：0自动；
宽度：40px；/*理想情况下，我不想在这里使用固定宽度*/
背景色：#ffffff；
} 
img{
高度：30px；
宽度：100%；
}

嘿

您可以将图像设置为背景图像。。。然后将跨度设置为“显示块…”

#包装器{
宽度：100%；
}
.txt{
文本对齐：居中；
利润率：10px自动；
背景色：#ffffff；
显示：块；
文本对齐：居中；
}/*理想情况下，我不希望在此处使用固定宽度*/
img{
高度：30px；
宽度：100%；
}
#模块包装器{
填充：200px0；
背景：url(http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg)无重复中心；}

嘿

您可以将其与css对齐。我已经更新了你的小提琴，看看结果

我添加的css是：

#wrapper {
  width:100%;
  position: relative;
}
#modulewrapper {
  text-align:center;
  position: absolute;
  top:0;
  left:0;
  right:0;
}

---

我不太明白你在问什么。 如果我没有弄错的话，你想要的是文本在图片的顶部。 正如我们所见，这是可以做到的

---

谢谢，但我正试图让“嘿”与图像重叠，因为“嘿”会坐在图像上方image@Zac答案更新。。。除非有什么原因，否则背景图片是不可接受的。再次非常感谢，我正在寻找@xxxmatko答案的效果。实际上，我一直在复制你的剪贴画所显示的内容（我不希望背景延伸到整个图像），如果.txt类没有固定的宽度，这个解决方案可以工作吗？是的，你可以在小提琴中看到它。

.txt

的宽度是其中文本的宽度。它显示为内联块，并在父级

#modulewrapper

的中心对齐。

 #wrapper {width:100%;position:relative}
.txt {
  position:absolute;
  text-align:center;
  margin:0 auto;
  width:40px;
  background-color:#ffffff; 
  z-index: 100;
  width:100%;
}
img {
height:30px;width:100%;
}

.imageClass{
  position:absolute;
   left: 0;
  top: 0;
}

.txt {
  text-align:center;
  margin:0 auto;
  width:100%;
  background-color:#ffffff;
  position: fixed;
  left: 0;
  top: 15px;
}
img {
  height:30px;
  width:100%;
  position: relatable;
}