Centrer des images

**yuyu599** · 15/01/2019, 11h24

Bonjour Le forum,

Je possède 6 images à mettre dans mon div et je souhaite les centrer entres elles selon la résolution de l'écran, c'est à dire quand qu'elles soient espacées à intervalle régulier entres elles et par rapport au bord de mon div.

J'ai donc un premier div dans lequel s'affiche mes images :

Code :

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

1
2
3
4
5
6
7
		.toto1{
				width: 70%;
 
				 margin: 0 auto;
				 background-color:#0CC;
 
		}

Lui impeccable il est toujours aligné.
Puis mes images :

Code :

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

1
2
3
4
		.toto2{
 
			max-width:200px;
			max-height:400px;

Quelle ligne puis-je rajouter pour obtenir ce que je veux ?
Voici un screen de ce que ca donne, j'ai masqué les images en roses juste pour infos.
Nom : Sans titre.jpg
Affichages : 111
Taille : 53,1 Ko

Nom : Sans titre.jpg
Affichages : 111
Taille : 53,1 Ko

Merci de votre aide !

**ProgElecT** · 16/01/2019, 09h38

Salut

Ce code peut être

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Essais flex</title>
		<style>
                        
                        #DivContainer {
                                display: flex;
                                width: 70%;
                                height:auto;
                                background-color:#0CC;
                        }
                        img {
                                margin:auto;
                                max-height:300px;
                                max-width:200px;
                        }
                </style>
	</head>
	<body>
        <div id="DivContainer">
			<img src="moi4.jpg" />
			<img src="whistle.gif" />
			<img src="moi6.jpg" />
			<img src="moi3.jpg" />
			<img src="Elle1.jpg" />
		</div>
	</body>
</html>

**yuyu599** · 16/01/2019, 10h18

Merci de votre message !
Cela fonctionne très bien sur PC mais sur mobile les images restent sur la même ligne sans se décaler les unes en dessous des autres ce qui crée un bug d'affichage ^^

Du coup c'est pas pratique :-)

**Zoki_Marciano** · 17/01/2019, 07h30

Il faut utiliser flex-wrap: wrap;

**ProgElecT** · 17/01/2019, 10h52

Salut

Moi, pour le fun, j'en suis arrivée à

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Essais flex</title>
		<style>
                        #DivContainer {
                                border: 3px solid Blue;
                                background-color:#0CC;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: row; /* mode empilement horizontal */
                                width: 70%;
                                height:auto;
                        }
                        img {
                                max-width:310px; /* égal à moins que la largeur en portrait */
                        }
                        
                        /* passer en mode colonne, lors du passage en mode portrait ou, si la largeur du navigateur est 320px de largeur ou moins: */
                        @media only screen and (orientation: portrait ),only screen and (max-width: 320px) {
                                #DivContainer {
                                        flex-direction: column; /* mode empilement vertical */
                                        width: auto;
                                        height: 70%;
                                }
                        }
                </style>
	</head>
	<body>
		<p>Haut de page</p>
		<div id="DivContainer">
			<img src="CarteVisiteJpg.jpg" />
			<img src="moi6.jpg" />
			<img src="moi3.jpg" />
			<img src="Elle1.jpg" />
		</div>
		<p>Bas de page: A que coucou</p>
	</body>
</html>

**yuyu599** · 17/01/2019, 10h59

Bonjour,
Merci de votre réponse.
Je viens d'essayer mais cela n'engendre aucune modification, j'ai essayé de le mettre dans les 2 divs.

**NoSmoking** · 17/01/2019, 12h44

Bonjour,
la réponse a été donnée par Zoki_Marciano

Il faut utiliser flex-wrap: wrap;

ceci est à rajouter au 1^er code fourni par ProgElecT à savoir

Code :

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

1
2
3
4
5
6
7
#DivContainer {
  display: flex;
  flex-wrap: wrap; 
  width: 70%;
  height: auto;
  background-color: #0CC;
}

**yuyu599** · 18/01/2019, 11h37

Cela fonctionne !

Un grand grand merci pour votre aide !!!
Enorme merci :-)

Centrer des images

Centrer un élément en CSS

Discussions similaires

Partager

Partager