图像中心文字（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％更改为因为它可能会导致单词触及图像的边缘，因此对于不支持计算的浏览器，我设置为90％，并为浏览器添加15px的“安全空间” 。