在图像上居中文本（Wordpress 和 Jetpack）

Question

我有一个关于 css 相关的 wordpress 插件的小问题。

我在我的博客上使用 Jetpack 的相关帖子插件。它在我的帖子底部显示 3 篇带有宽幅图像和标题的文章。

我想让文本在我的图像上水平和垂直居中。正如你在这篇文章 (https://www.ptds.fr/velotaf-guide-de-survie-du-cycliste-urbain/) 上看到的那样，我设法通过玩 css 来获得它。

但我对这个解决方案不满意，因为如果内容太小并且文本没有真正垂直对齐（只是顶部的填充），它将无法工作。

提前致谢。

https://www.ptds.fr/velotaf-guide-de-survie-du-cycliste-urbain/

Answer 1

您需要删除一些已添加的内容，但请执行以下操作：

#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post {
    position: relative;
}

#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    width: calc( 100% - 30px );
}

从您当前的 CSS 中删除这些项目并将它们替换为上面的值：https://i.imgur.com/kEf3ev4.png

最终结果将如下所示：https://i.imgur.com/qzGI3sK.png

编辑：我将宽度从 100% 更改为因为它可能导致文字触及图像边缘，所以我将不支持 calc 的浏览器设置为 90%，并添加了 15px 的“安全空间”浏览器。