将文字居中置于图像之上（Wordpress 和 Jetpack）

Question

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

我在我的博客上使用了来自 Jetpack 的相关 posts 插件。它在我的 posts.

的底部显示 3 篇带有宽图像和标题的文章

我想让文本在我的图像上水平和垂直居中。正如您在 post (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 "safe space" 对于支持的浏览器。

将文字居中置于图像之上（Wordpress 和 Jetpack）

Center text over image (Wordpress and Jetpack)

html

css

wordpress

jetpack