我真的很想解决这个问题-我试图在悬停在图像上方的响应div中垂直和水平地显示文本。
这是基本HTML和CSS结构的jsfiddle。
我已经尝试了许多不同的CSS方法-使用table（该方法不起作用，因为我习惯于absolute在图像上方transform: translate(-50%, -50%); top: 50%; left: 50%;放置文本，从而使文本偏移，以及其他我目前不记得的方法。
主要问题是我有两个“图层”-文字和下方的图像。为了做到这一点，我需要使用absolute它导致该table选项不起作用。
非常感谢您提出的任何建议。
注意：我使用的图像必须保持16：9的宽高比。
谢谢！
我有一个有效的示例：https：//jsfiddle.net/v1harbqm/7/
我以@gopalraju的小提琴为基础。它不是在Safari中工作，而是display: table;将标题结合使用并增加了高度。
编辑：<span>在标题内创建了一个使其与更长的文本一起使用。这次使用转换，看起来Safari仍然需要-webkit-前缀，因此这可能是开始时的原始问题。
无论如何，这是更新的：https : //jsfiddle.net/v1harbqm/13/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句