Centrer une image via CSS [Résolu/Fermé]

Signaler
Messages postés
1075
Date d'inscription
dimanche 21 décembre 2008
Statut
Membre
Dernière intervention
7 mars 2018
-
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
-
Bonjour,

Je sais que la question a été posé d'innombrables fois, mais il semble que la réponse que je recherche n'y est pas...

Je souhaite center plusieurs images de dimensions différentes, j'utilise donc une class :

img.section{ 
 border:solid 2px #99CCFF; 
 margin-top:10px; 
 margin-bottom:20px; 
 text-align:center;
 }


Sachant que tout le contenu est positionné dans un div :

div.content { 
 width:100%; 
 padding-left:25px; 
 padding-right:30px; 
 }


Pourriez-vous me dire ce qui ne va pas ?

Merci.
"Les monopoles sont au libre marché ce que les dictatures sont à la politique." (Serge Rouleau).

2 réponses

Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
786
Hello,

Qu'on soit clair : centrer verticalement ou horizontalement ?
Parce que là, tu ne fais ni l'un ni l'autre !
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
786
Essaye ça :

img.section{ 
    border:2px solid #99CCFF; 
    margin:10px auto 20px auto;
 }
Messages postés
1075
Date d'inscription
dimanche 21 décembre 2008
Statut
Membre
Dernière intervention
7 mars 2018
64
Toujours pas centré :(

Avant j'utilisais une div pour centrer les images :

div {
	text-align:center;
	}


Mais dès qu'il s'agit d'incorporer une class, rien ne marche.
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
786
Montre-nous le code HTML de ta div contenant les images.
Messages postés
1075
Date d'inscription
dimanche 21 décembre 2008
Statut
Membre
Dernière intervention
7 mars 2018
64
Simplifié, ça donne ça :
<div class="content"> 
<img class="section" usemap="#menu" src="http://image.jpg"/>
</div>
Messages postés
31
Date d'inscription
mercredi 16 mai 2012
Statut
Membre
Dernière intervention
18 juin 2013

text-align comme son nom l'indique c'est pour aligner un text moi a ta place je passerai par les tableau c'est ce que j'ai fais pour mon site d'ailleurs si tu met les images a la meme taille ça fera moin bordélique
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
786
Si tes images n'ont pas de largeur fixe tu ne peux pas les centrer.
Soit tu imposes une largeur à tes images, soit tu les incorpores, comme tu as déjà fait sans doute, dans une div de largeur 100% qui possède l'attribut "text-align:center".
Messages postés
1075
Date d'inscription
dimanche 21 décembre 2008
Statut
Membre
Dernière intervention
7 mars 2018
64
C'est bien ça, et le problème ne vient pas du code, mais du navigateur : j'ai dû effacer le cache pour finalement m'apercevoir que tout fonctionne... Un bête oubli.

Merci tout de même !
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
786
De rien :)