Html 垂直对齐图像顶部的中间和居中文本

我尝试使用垂直对齐的中间和文本对齐的中心将文本放置在图像上。但它们似乎都不起作用

我的html是

<div class="hero-image">
  <img src="https://s23.postimg.org/ahcg75tsb/hero.png" alt="">
  <a href=""><h2>Some Sample text</h2></a>
</div>

演示--

是因为我没有在父div中指定图像的宽度吗

---

非常感谢您的帮助。

您可以使用

上的
显示：flex
。英雄图像

与

对齐项目：居中：


。英雄形象{
显示器：flex；
位置：相对位置；
对齐项目：居中；
}
.英雄形象{
宽度：100%；
}
.英雄形象h2{
背景：#FF2BF无重复滚动0；
颜色：#fff；
文本对齐：居中；
宽度：200px；
保证金：0px自动；
位置：绝对位置；
左：0；
右：0；
}
您可以将
上的
显示：flex
与
对齐项目：居中组合使用：


。英雄形象{
显示器：flex；
位置：相对位置；
对齐项目：居中；
}
.英雄形象{
宽度：100%；
}
.英雄形象h2{
背景：#FF2BF无重复滚动0；
颜色：#fff；
文本对齐：居中；
宽度：200px；
保证金：0px自动；
位置：绝对位置；
左：0；
右：0；
}

制作“顶部”填充，请参见代码：


。英雄形象{
显示：块；
位置：相对位置；
}
.英雄形象a{
背景：#FF2BF无重复滚动0；
颜色：#fff；
左：0；
位置：绝对位置；
右：0；
文本对齐：居中；
最高：45%；
宽度：200px；
底部：0；
垂直对齐：中间对齐；
文本对齐：居中；
保证金：0px自动；
高度：50px
}

制作“顶部”填充，请参见代码：


。英雄形象{
显示：块；
位置：相对位置；
}
.英雄形象a{
背景：#FF2BF无重复滚动0；
颜色：#fff；
左：0；
位置：绝对位置；
右：0；
文本对齐：居中；
最高：45%；
宽度：200px；
底部：0；
垂直对齐：中间对齐；
文本对齐：居中；
保证金：0px自动；
高度：50px
}