Positionnement en CSS
guiilbo
Messages postés
50
Date d'inscription
Statut
Membre
Dernière intervention
-
lokakilo Messages postés 213 Date d'inscription Statut Membre Dernière intervention -
lokakilo Messages postés 213 Date d'inscription Statut Membre Dernière intervention -
Bonjours, je fait presentement un site internet et j'aimerais s'avoir comme faire pour que peut importe la resolution de lecran mon objet(photo) soit toujours au centre ou placer toujours au meme endroit .
Merci a l'avance :) !Bonjour,
Merci a l'avance :) !Bonjour,
3 réponses
ok et bien je veux faire un site anglais francais alors mon index cera un image francais et lautre anglais jaimerais savoir comme faire pour qu'il sois toujours au centre
Et bien t'as deux solutions (enfin t'en as plus mais bon,...)
Enfin, tintroduis une image quoi, et pour le CSS, c'est la que ta deux solutions
Solution 1 :
Solution 2 : (dans l'exemple, ton image fait height:200px et width:100px, mais c'est pour l'exemple)
Je t'explique la solution 2:
Si tu met left:50%; sans rien d'autre, le bord de image se retrouvera à la moitié de la page, mais pas le centre, c'est pourquoi il faut rajouter margin-left:-50px; (Ne pas oublier le - !), ici, 50px est la moitié de la largeur de l'image (100px). Cela permet de décaler limage pour que le centre de l'image soit au milieu de la page. Tu fait pareil pour top et margin-top.
Remarque : dans la deuxième méthode, tu dois connaître à l'avance la taille de ton image (ou autre, ça dépend ce que tu veux mettre au centre), cependant, je préfère tout de même la deuxième méthode parce qu'elle marche à tous les coups, ce qui n'est pas le cas de la première méthode.
Remarque 2 : dans la deuxième méthode, tu n'es pas obligé de mettre le <div id="divPhoto"> dans le code HTML.
<div id="divPhoto"> <img src="photo.jpg" alt="Photo" id="photo" /> </div>
Enfin, tintroduis une image quoi, et pour le CSS, c'est la que ta deux solutions
Solution 1 :
#divPhoto {
position:absolute;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
}
Solution 2 : (dans l'exemple, ton image fait height:200px et width:100px, mais c'est pour l'exemple)
#photo {
position:absolute;
width:100px;
height:200px;
left:50%;
margin-left:-50px;
top:50%;
margin-top:-100px;
}
Je t'explique la solution 2:
Si tu met left:50%; sans rien d'autre, le bord de image se retrouvera à la moitié de la page, mais pas le centre, c'est pourquoi il faut rajouter margin-left:-50px; (Ne pas oublier le - !), ici, 50px est la moitié de la largeur de l'image (100px). Cela permet de décaler limage pour que le centre de l'image soit au milieu de la page. Tu fait pareil pour top et margin-top.
Remarque : dans la deuxième méthode, tu dois connaître à l'avance la taille de ton image (ou autre, ça dépend ce que tu veux mettre au centre), cependant, je préfère tout de même la deuxième méthode parce qu'elle marche à tous les coups, ce qui n'est pas le cas de la première méthode.
Remarque 2 : dans la deuxième méthode, tu n'es pas obligé de mettre le <div id="divPhoto"> dans le code HTML.
