Bonjour,

je débute en développement web et avant de poster ce message j'ai regardé la FAQ d'autres forum et solutions mais je ne comprends pas d'où vient le problème.

Mon objectif est d'aligner plusieurs images séparées par un espace. Le problème est que j'ai beau essayer de faire un centrage sur les conteneur parents, et même sur la ligne d'image en question (avec soit display : block; width + margin auto, text-align : center...) je n'ai pas trouvé la solution. Le but est aussi de faire que cette organisation se conserve qu'importe la résolution.

Voici les codes en question:

CSS :

Code : 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
/* GALERY */
 
#content {
  font-family: 'Din', "Trebuchet MS";
  color :#FFF;
  text-align: justify;
  margin-top: 30px;
  margin-bottom: 40px;
}
 
/* #works contient tous les travaux, le margin-top est élevé pour ne pas apparaitre sous le menu flottant */
 
#works {
    overflow: hidden;
    width: 56vw;
    margin-left: auto;
    margin-right: auto;
    /*padding-left: 4vw;*/
}
 
#works .work {
    /* Voici le overflow:hidden qui permet de cacher les triangles et de ne les voir apparaitre que lorsqu'ils sont dedans la div */
    overflow: hidden;
    width: 10.65vw;
    height: 10vw;
    border: 4px solid #222;
    cursor: pointer;
    position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
    float: left;
    margin-right: 35px;
    margin-bottom: 40px;
}
 
#works .work:hover {
    border: 4px solid #FFF;
}
 
#works .work > img {
    width: 10.65vw;
    height: 10vw;
 
}
HTML :

Code : 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
53
54
55
56
57
58
59
60
61
62
63
64
<div class="sectiqn" data-toggle="collapse" data-target="#gql1">
          <h1>Maisons</h1>
        </div>
        <div id="gql1" class="collapse in">
          <div id="content">
            <div id="works">
 
              <a  title="Maison Queenslander" rel="galerie" alt="Maison Queenslander" class="fancybox" href="galerie/mini/WP_000546.jpg" alt="PUPPY">
                <div class="work">
 
                  <img src="galerie/WP_000546.jpg" />
                  <div class="triangle-gauche"></div><!-- .triangle-gauche -->
                  <div class="triangle-droite"></div><!-- .triangle-droite -->
                  <span>Victoria<br/>Street</span>
 
                </div><!-- .work -->
              </a>
 
              <a  title="Maison Queenslander Blue" rel="galerie" alt="Maison Queenslander Blue" class="fancybox" href="galerie/mini/WP_000549.jpg">
                <div class="work">
 
                  <img src="galerie/WP_000549.jpg" />
                  <div class="triangle-gauche"></div><!-- .triangle-gauche -->
                  <div class="triangle-droite"></div><!-- .triangle-droite -->
                  <span>Queenslander<br />Blue</span>
 
                </div><!-- .work -->
              </a>
 
              <a  title="Maison Queenslander Big" rel="galerie" alt="Maison Queenslander Big" class="fancybox" href="galerie/mini/WP_000588.jpg">
                <div class="work">
 
                  <img src="galerie/WP_000588.jpg" />
                  <div class="triangle-gauche"></div><!-- .triangle-gauche -->
                  <div class="triangle-droite"></div><!-- .triangle-droite -->
                  <span>Shankey<br>Street</span>
 
                </div><!-- .work -->
              </a>
 
              <a  title="Maison Queenslander Big II" rel="galerie" alt="Maison Queenslander Big II" class="fancybox" href="galerie/mini/WP_000589.jpg">
                <div class="work">
 
                  <img src="galerie/WP_000589.jpg" />
                  <div class="triangle-gauche"></div><!-- .triangle-gauche -->
                  <div class="triangle-droite"></div><!-- .triangle-droite -->
                  <span>Shankey<br>Street II</span>
 
                </div><!-- .work -->
              </a>
 
              <a  title="My Queenslander" rel="galerie" alt="My Queenslander" class="fancybox" href="galerie/mini/WP_000840.jpg">
                <div class="work">
 
                  <img src="galerie/WP_000840.jpg" />
                  <div class="triangle-gauche"></div><!-- .triangle-gauche -->
                  <div class="triangle-droite"></div><!-- .triangle-droite -->
                  <span>My<br>Queenslander</span>
 
                </div><!-- .work -->
              </a>
            </div>
          </div>
        </div>
Est-ce que quelqu'un aurait une idée, une suggestion ?

D'avance, merci

Cordialement,

Unic0