Centrer une image par css

Fermé
HiWii - 31 oct. 2008 à 03:04
electronLibre16 Messages postés 5 Date d'inscription vendredi 31 octobre 2008 Statut Membre Dernière intervention 23 novembre 2008 - 31 oct. 2008 à 17:45
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 !
A voir également:

4 réponses

webjfr Messages postés 19 Date d'inscription jeudi 30 octobre 2008 Statut Membre Dernière intervention 8 décembre 2008 12
31 oct. 2008 à 14:23
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 !
0
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+
0
webjfr Messages postés 19 Date d'inscription jeudi 30 octobre 2008 Statut Membre Dernière intervention 8 décembre 2008 12
31 oct. 2008 à 17:38
Re,

Va voir ce lien :
http://blog.alsacreations.com/2004/06/09/22-display-vous-connaissez
0
electronLibre16 Messages postés 5 Date d'inscription vendredi 31 octobre 2008 Statut Membre Dernière intervention 23 novembre 2008
31 oct. 2008 à 17:45
#{
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 :)
0