Discussion :

[laurentSc]

Bonjour,
je souhaite afficher des images en les centrant dans leur conteneur. Je croyais avoir fait le nécessaire mais visiblement non, vu que les images restent collées à gauche du conteneur. Merci de me corriger.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="backgroundblue center">
    <a href="xxx" target="_blank"><img src="xxx" alt="" /></a>
    <a href="xxx" target="_blank"><img src="xxx" alt=""/></a>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
img {
    margin:20px;
}
 
.backgroundblue {
    background-color: blue;
}
 
.center {
    margin:auto;
}

Le fond de couleur bleu sert juste pour la mise au point pour visualiser le conteneur.

[Pytet]

Bonjour,

Un text-align: center; sur ton div conteneur, ou définir une largeur à ton div conteneur si tu veux le centrer avec les marges.

[laurentSc]

Merci,
mais il semblerait que seul le text-align: center; fonctionne car si je fais

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.center {
    width:1500px;
    margin:auto;
   // text-align: center;
}

c'est pas centré...

[Pytet]

La largeur du conteneur doit être inférieure à la largeur du parent ou de la page pour centrer avec les marges.
https://jsfiddle.net/vdjxhes7/

[laurentSc]

La largeur du conteneur doit être inférieure à la largeur du parent ou de la page pour centrer avec les marges.

Le "doit" : supposition ou obligation ? Logiquement, obligation...

J'ai repris ton code dans codepen (je maîtrise que ça) mais ça ne reste centré qu'avec text-align:center; https://codepen.io/laurentsch/pen/KKEBxpB

[Pytet]

Le margin: auto; permet de centrer le conteneur avec une largeur définie, mais il ne centre pas les éléments à l'intérieur, il faut effectivement un text-align pour définir comment aligner les éléments inline dans ce conteneur (on pourrais choisir de centrer le conteneur et aligner les images sur la droite par exemple).

Ma suggestion de définir une largeur à ton conteneur était juste pour te montrer l'utilité du margin: auto;.
Dans ton cas, si tu veux centrer les images et pas le conteneur, uniquement text-align: center; sur le conteneur semble suffisant.