Center Image In Overlay Box

[guybower1]

Hi

I have a pesky image inside an overlay box which just will not center no matter what I try. The CSS I have tried using is:-
img.coe { position: absolute; bottom: 1.5%; display: block; margin: 0 auto; }

I have tried it with and without !important and no luck. Inspector shows the class as img.coe, so I am pretty sure I am addressing the correct element

I have tried wrapping the image in a div, firstly using just <div align="center"> with no result, then I tried giving the div a class (certificate) and using same css CSS to try and center it.

div.certificate { display: block; margin: 0 auto; }

This centered the image on the page, but not in the overlay box and it was now no longer at the bottom of the overlay box

When I removed the CSS for that and removed the div around the image, the image returned to the bottom of the overlay, but it still sits in the middle of the page and not the center in the overlay box, which is odd. Caching was all cleared, though it is a staging serving, so shouldn’t be a huge issue

Any ideas as to why it is so difficult to center this image in the overlay box at the bottom?

Thanks in advance

[basanta]

Hi There,

Thanks for writing in!

I am really sorry but the site is not accessible to me.
The CSS you have written for the image is not working because of the position.
Margin: auto, won’t work in case os absolute position. So please update the CSS with this.

img.coe {
position: absolute;
bottom: 1.5%;
display: block; 
left: 50%;
 transform: translate(-100%); 
}

Hope this helps!

[guybower1]

Hi Basanta

Thanks so much for your reply

I’m not sure why the staging server was not accessible, as I just logged in there a second ago. perhaps it was offline for a moment.

You can see why I am using the absolute command in position; just so it sits at the bottom of the overlay box.

I altered that code to what you supplied and it moved the image to the extreme left had side, in fact, it took the very left of the image off the screen. I then played around with what you gave me and found that the correct setting was -50% rather than -100% next to translate. It now seems to work fine, at least in Chrome

Just so it aids my getting better at my CSS coding, what does the left 50% and transform: translate do and why did the final setting end up working on -50% instead of -100%

Thanks so much for your time

Regards

[guybower1]

hi again Basanta

I transferred everything from the staging server to the main server, but for some odd reason, the overlay will not show in any smaller cell phone sizes, yet I have no media queries in place. I did have initially, but have since replaced all of those media queries with responsive elements for the overlay box. I have cleared the caches in my website as well as clearing the browser cache in Chrome. It still shows on all sizes in Responsinator except from 414px down.

I cannot see what may be causing this behaviour, as there are simply no media queries, or anything else, stopping it.

Login details included in a secure note

regards

[christian]

Hey @guybower1,

You have hidden it in small screens using a break point class. You applied it to the Raw Content element.

Please remove it.

Regarding the CSS, please see this article for the left position. And, this one for the translate method. Because left positioning moves the left edge of the element in the center, you will need the translate method to move 50% of the element’s width back.

Hope that helps.

[guybower1]

hi Christian

Thanks so much for your reply

Ah, I had removed that on the staging server, but forgot to do the same on the live server. My apologies

Thanks for spotting it

Regards

[friech]

We are delighted to assist you with this, please let us know how it goes,

Cheers!