-1

I have a little question about a wordpress plugin which is related to css.

I use on my blog the related posts plugin from Jetpack. It displays 3 articles with wide image and title at the bottom of my posts.

I would like to make the text center horizontally and vertically over my image. As you can see on this post (https://www.ptds.fr/velotaf-guide-de-survie-du-cycliste-urbain/) I managed to get it by playing around with css.

But I'm not happy with this solution as it will not work if the content is too small and the text is not really vertically aligned (just a padding from top).

Thanks in advance.

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

Jedediah
  • 3
  • 1
  • Tell me more about your search skills cause I didn't find any solution for this particular issue. Please keep your bad mood for someone else, you're not helping. – Jedediah Mar 02 '18 at 06:43
  • https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block is somehting you easily find when searching StackOverflow for "center text". https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css?rq=1 is even linked right next to your question (and was as soon as you started vreating your question when your title was done). – connexo Mar 02 '18 at 08:18
  • Possible duplicate of [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) – connexo Mar 02 '18 at 08:19

1 Answers1

0

You'll need to remove some of what you've added, but here you go:

#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 );
}

Remove these items from your current CSS and replace them with the values above: https://i.imgur.com/kEf3ev4.png

The end result will look like this: https://i.imgur.com/qzGI3sK.png

Edit: I changed the width from 100% because it could lead to the words touching the edge of the image, so I set to 90% for browsers that don't support calc, and added 15px of "safe space" for browsers that do.

Xhynk
  • 12,250
  • 8
  • 29
  • 61