28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical de miniatures

Bonjour à tous,

Je cherche à centrer verticalement des miniatures dans des blocs carrés. Malgré ma lecture et application du tuto de votre site ici http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html[/url le résultat n'est pas bon.

Voici mon code, vous pouvez voir le résultat ici: http://vianney-levesque.fr/test.html

Le résultat est identique sur tous les navigateurs, je ne vois vraiment pas ce qui cloche.
Pour info les miniatures font 200px pour le plus grand côté.
Un grand merci par avance Smiley biggrin 


<html>
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        background: #ffffff;
      }
      
      #site {
        width: 90%;
        margin: 10px auto;
        max-width: 960px;
      }        
      
      #box_images {
        width: 100%;
        text-align: center;
      }
      
      img {
        margin: 0;
        padding: 0;
        vertical-align:middle;
      }
      
      p { 
        height:200px;
        line-height:200px;
        text-align:center; /* centrage horizontal d'un élément en-ligne */
      }      
      
      .image {
        width: 200px;
        height: 200px;
        background: #aaa;
        display: inline-block;
        /* hack IE<8 */
        *display:inline;
        zoom:1;
        margin: 6px;
        -moz-box-shadow: 5px 5px 5px 0px #c0c0c0;
        -webkit-box-shadow: 5px 5px 5px 0px #c0c0c0;
        -o-box-shadow: 5px 5px 5px 0px #c0c0c0;
        box-shadow: 5px 5px 5px 0px #c0c0c0;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=5);
      }
      
      a img {
        border: 0;
      }
      </style>
  </head>
  <body>
    <div id="site">
      <div id="box_images">
        <div class="image"><p> <img src="thumbs/01.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/02.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/03.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/04.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/05.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/06.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/07.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/08.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/09.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/10.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/11.jpg" title=""/> </p></div>
        <div class="image"><p> <img src="thumbs/12.jpg" title=""/> </p></div>
      </div>
    </div>
  </body>
</html>

Modifié par vianleg31 (10 Apr 2014 - 08:52)
Bonjour,

Je ne sais pas à quoi cela doit ressembler au final (si d'autres éléments viendront s'ajouter, etc...), mais il doit y avoir moyen de "simplifier" un peu ce code.
Il y a certainement plusieurs façon de faire, en voici une (bricolée à l'arrache, donc pardon pour les erreurs ou omissions)

N'hésites pas si tu as des questions, des précisions à apporter.
Bonjour 6l20,

Merci de te pencher sur mon problème. Ta solution est bien mais elle s'éloigne un peu de ce que je souhaite, à savoir garder les div carrées. N'est-il vraiment pas possible de centrer ces foutus images comme indiqué dans le tuto ? De plus je souhaite vraiment une solution pour tous les navigateurs (y compris IE6 et 7).

Merci

[édit] Finalement je vais utiliser cette méthode, merci beaucoup.
Modifié par vianleg31 (10 Apr 2014 - 14:53)
Sujet clos
Aller à