Aligner et mettre à l'échelle les images

Question

J'ai besoin d'aide avec ce code sur mon site W3Schools, je souhaite conserver tous les éléments au centre de la page. Cependant, lorsque je centre, l'objectif de la fonction cible l'ancienne position de l'image.

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

J'ai changé le code, mais je n'arrive pas à le comprendre

Lorsque l'image est centrée, l'objectif est à l'extérieur de l'image. Comme si c'était son post précédent

Centre de l'image, la position de l'objectif est incorrecte

Résolu !!!

Pour résoudre cette situation, créez un div class="main" qui contient tous les éléments. Dans le code CSS, nous avons utilisé les paramètres que notre ami Samar nous a donnés. Merci Samar.

Image résolue !

Answer 1

Donc, d'après ce que j'ai compris, vous souhaitez que les résultats de l'image et du zoom restent tels quels, mais centrés dans la page ?

Si c'est le cas, vous devez utiliser flexbox en CSS comme ceci :

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