Align and scale images

Question

I need help with this code on my W3Schools website, I want to keep all elements in the center of the page. However, when I center, the feature's lens targets the old position of the image.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom

I changed the code, but I can’t understand it

When the image is centered, the lens is outside the image. Like this was her previous position

Image center, incorrect lens position

solved!!!

To solve this situation, create a div class="main" that contains all elements. In the CSS code, we used the settings our friend Samar gave us. Thank you Samar.

Image solved!

Answer 1

So, from what I understand, you want the image and zoom results to remain as is, but centered in the page?

If so, you need to use flexbox in your css like this:

.img-zoom-container {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
}