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的“安全空间”浏览器。

图像中心文字（Wordpress和Jetpack）

1 个答案: