18041 sujets

Questions générales et questions de débutants

Centrer une image sur l'ecran

salut,
j'ai un problème que j'arrive pas a le résoudre et j'ai rien trouvé sur internet, lorsque je clique sur l'image elle s'agrandisse dans un div qui sera sur la page courante(c comme un calque). mon image doit se positionner au centre d'écran même ci je clique sur une image qui est en bas du page, elle dois s'apparaitre directement sur l'écran sans besoin se glisser vers le haut du page pour la voir.
aussi on doit y avoir une div qui couvre la page entier .
pouvez vous m'aide Smiley confused ? merci d'avance Smiley biggrin
voila mon code:
<html>
<script>
i = 1;
function affiche() {
img=new Image();
img.src ='img/img-20-2-1.jpg';
img.id = "myimg";
img.onload = function() {
document.getElementById("overlay").style.display = "block";
document.getElementById("overlay").innerHTML = '';
document.getElementById("overlay").style.display = 'block';
document.getElementById("overlay").appendChild(img);
};
document.getElementById("overlay").onclick = function() {
this.style.display = 'none';

};
}

</script>

<style>
#overlay {
display : none;
text-align: center;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.6);
background-image:overlay.appendChild();
}

</style>

</head>
<body>
<center>
<div id="overlay"></div>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<center><img src="img/img-mini-20-1-1.jpg" onclick= "affiche(1)"/><br></center>
</body>
</html>
Bonjour,

Si j'ai bien compris tu souhaites centrer une image au centre de l'écran?

Tu fais comme ceci concernant l'image :

position: absolute;
top: 50%;
left: 50%;

L'image se calera au centre de ton document html. Smiley biggrin
bonjour Smiley smile
merci pour votre réponse mais lorsque je l’applique sur mon code . l'image sera au centre de mon div et pas au centre de mon écran

<center>
<div id="overlay"></div>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<p>nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn<p>
<center><img src="img/img-mini-20-1-1.jpg" onclick= "affiche(1)"/><br></center>


ça c'est le code final, car si oui tu peux retirer center qui ne sert à rien. De plus ton image n'est dans aucune div donc si tu l'a met en absolute, sa position de référence sera le document.
ok mais il ça marche pas chez moi .
l'image est incluse dans div="overlay" par document.getElementById("overlay").appendChild(img);
AlexBeaudouin
a écrit :
Tu fais comme ceci concernant l'image :

position: absolute;
top: 50%;
left: 50%;

L'image se calera au centre de ton document html.

... avec un display: block pour l'image et un margin-top et un margin-left négatifs de valeur égale respectivement à la moitié de la hauteur et de la largeur de l'image.
Sujet clos
Aller à