Positionnement en CSS
Fermé
guiilbo
Messages postés
50
Date d'inscription
mardi 8 mai 2012
Statut
Membre
Dernière intervention
27 mars 2014
-
27 mai 2012 à 04:28
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 - 30 mai 2012 à 23:52
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 - 30 mai 2012 à 23:52
3 réponses
lokakilo
Messages postés
213
Date d'inscription
dimanche 13 juillet 2008
Statut
Membre
Dernière intervention
20 juin 2013
14
27 mai 2012 à 15:58
27 mai 2012 à 15:58
En utilisant des text-align: center, ou/et en utilisant les % en CSS à la place des px.
guiilbo
Messages postés
50
Date d'inscription
mardi 8 mai 2012
Statut
Membre
Dernière intervention
27 mars 2014
30 mai 2012 à 23:29
30 mai 2012 à 23:29
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
lokakilo
Messages postés
213
Date d'inscription
dimanche 13 juillet 2008
Statut
Membre
Dernière intervention
20 juin 2013
14
30 mai 2012 à 23:52
30 mai 2012 à 23:52
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.
