Centrer une image par css
Bonjour,
dans le cadre d'un projet, je suis amené à utilisé une image "en vitrine" de mon site, c'est à dire que celle-ci doit s'afficher par dessus mon site ! mes div, ect... j'utilise donc la position "absolute",
Mais la où je bloque c'est qu'il faudrait que cette image se centre automatiquement selon la largeur du navigateur, mon code pour l'instant pour aider au debug :
<style>
img.centered {
position: absolute;
right:10%;
left:10%;
}
</style>
<img src="http://hiwii.com/imagetest.jpg" class="centered" />
Merci de votre aide !
dans le cadre d'un projet, je suis amené à utilisé une image "en vitrine" de mon site, c'est à dire que celle-ci doit s'afficher par dessus mon site ! mes div, ect... j'utilise donc la position "absolute",
Mais la où je bloque c'est qu'il faudrait que cette image se centre automatiquement selon la largeur du navigateur, mon code pour l'instant pour aider au debug :
<style>
img.centered {
position: absolute;
right:10%;
left:10%;
}
</style>
<img src="http://hiwii.com/imagetest.jpg" class="centered" />
Merci de votre aide !
4 réponses
-
Salut,
Il n'existe pas de commande pour centrer une image en css, alors, on est obligé de bidouiller un peu, grace au marge automatique !
img.centrered { display:block; clear:both; margin-left:auto; margin-right:auto; }
Voilou ! -
Oui mais c'est un background, ça n'a strictement rien à voir avec une image flottante LOL
dsl pour le pseudo je l'avais collé au mauvais endroit !
Et sinon pour le code précedent j'ai l'impression que les marges auto ne fonctionne pas, peut-être a cause de l'attribut position absolute de mon img, sinon à quoi corresponde ces critères : display:block; clear:both; ??
Merci A+ -
Re,
Va voir ce lien :
http://blog.alsacreations.com/2004/06/09/22-display-vous-connaissez -
#{
position:absolute;
width:500px
height: 300px;
top:50%;
left:50%;
margin-left: - 250px;
margin-top: -150px;
z-index:100
}
C#est comme ca qu#on centre un site, et donc une image aussi :)
