Центриране на текст върху изображение (Wordpress и Jetpack) - html, css, wordpress, jetpack

Имам един малък въпрос за Wordpress плъгин, който е свързан с CSS.

Използвам в моя блог съответната публикация от 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/

Отговори:

Трябва да премахнете част от това, което сте добавили, но тук сте:

#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 "безопасно място" за браузърите, които правят.