Overlay Centering
Thomas Deliduka
On our website: https://www.stpatrickcolumbus.org/
I've got text that is overlayed on top of the image. In order to get it in that position, I chose Advanced -> Enable Custom Position I then set it to Absolute positioning and I set the height.
But in order to center it, I had to go to Style and set a left/right margin. Because anything else doesn't seem to work.
I tried setting the X axis on Absolute to 50% but that just starts it at the halfway point. Setting it to 25% doesn't seem to work. I tried -50% and it was clear off the page.
How can I get an item that is overlayed on top of something to center on the page? Because right now the margin thing isn't really working. It looks pretty bad in some cases.
Pavel
Accepted AnswerHi. Unfortunately, there are no settings for this. This can be done only through CSS. Disable all the settings that you tried to do for this and use the following code.
#sppb-addon-wrapper-1585855657007 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}Thomas Deliduka
Accepted AnswerThanks, I couldn't put the custom CSS into the element itself. I had to go to the template and add it to the global custom CSS. After doing that, it worked fine. I made some slight modifications for my needs but that works.
Thanks!
