Centrer horizontalement plusieurs DIV inline-block

**saluts92** · 18/09/2018, 16h18

Bonjour,

Après avoir cherché je sèche.

Dans un DIV qui prend 100% de la largeur de l'écran, je peux avoir 1 ou plusieurs DIV en inline-block selon la largeur de l'écran ET je peux avoir plusieurs lignes de DIV : tel des vignettes produits par exemple.
Je souhaite que les x DIV soient centrés dans le DIV conteneur MAIS que si la dernière ligne n'a pas le même nombre de DIV qu'au dessus , cette dernière soit centrée à gauche.

D'avance merci pour votre aide

**psychadelic** · 18/09/2018, 17h04

Code css :

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

1
2
3
#DivParent .divEnfant::last-child {
  margin:0 auto;
}

sinon en JavaScript en passant ou non par l’affectation de cette classe suivant que ce dernier élément est ou non unique sur sa ligne.

**saluts92** · 20/09/2018, 09h17

Merci mais cela ne correspond pas complètement à mon besoin
dans le code test ci-dessous :
les carrés(DIV) verts sont alignés à gauche, mais le DIV conteneur en jaune) n'est pas centré dans son propre conteneur

une idé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
<html>
<head>
	<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
	<div style="text-align:center;width:700px;max-width:100%;">
		<div style="display:inline-block;background-color:red;margin:0 auto;">
			<div style="background-color:yellow;text-align:left;">
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
                <div style="display:inline-block;background-color:green;width:200px;height:100px;">
                </div>
            <div>
        </div>
	</div>
</body>
</html>

**psychadelic** · 21/09/2018, 23h05

comme ça ?

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
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>multi divs</title>
<style>
  #Group {
    display: block;
    width: 800px;
    background-color: orangered;
  }
  #Group_Red {
    width: 750px;
    display: block;
    background-color:midnightblue;
    margin: 0 auto;
  }
  #Group_Jaune {
    display: block;
    width: 700px;
    background-color: yellow;
  }
  #Group_Jaune div {
    display: inline-block;
    background-color: green;
    width: 190px;
    height: 50px;
    margin:5px;
  }
  #Group_Jaune div:last-child {
    display: block  !important;
    margin-left: auto !important;
    margin-right: auto !important;;
  }
</style>
</head>
<body>
<div id="Group">
  <div id="Group_Red">
    <div id="Group_Jaune">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
    </div>
  </div>
</div>
</body>
</html>