Discussion :

[Nikoalas]

Bonjour,

Je suis tout content, j'arrive à mettre mes miniatures photos dans un div et ça fait joli mais bon, ce n'est pas encore ça. Quand la miniature est plus petite que le div, ça me laisse voir le fond, ce ne serait pas bien grave si j'arrivais à centrer l'image mais, s'il est facile de procéder au centrage horizontal, je n'arrive pas à centre la photo verticalement (pour les cas où elle est plus large que haute). Voici le code css que j'ai écrit pour le div en question :

Code :

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

1
2
3
4
5
6
7
#gallery pic
{
	float: left;
	height: 200px;
	width: 200px;
	border: 1px solid black;
}

J'ai trouvé quelques exemples avec la position "absolute" mais ce n'est pas bon pour centrer verticalement à l'intérieur d'un div, si vous pouviez me venir en aide afin d'avoir une présentation plus correcte, je vous en serai reconnaissant.

Nicolas.

[onirisme]

Bonjour, je ne sais pas si ça fonctionne sous IE mais c'est bon sous firefox

Dans la page HTML :

Code :

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

1
2
3
4
 
<div id="imgBlock"><!--Déclaration d'une div qui contient l'image-->
        <img id="img" src="img/stylesheet.png" /><!--Déclaration de l'ID de l'image.-->
        </div>

Ensuite, la partie 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
 
#imgBlock{
    height :200px ;/*Hauteur et largeur de la div*/
    width : 200px ;
    background-color : #CC3300 ;/*Juste pour vérifier*/
 
    }
 
#img{    
    position: relative;/*Position relative à la div "imgBlock"*/
     left: 50%; /*Centrage horizontal*/
     top: 50%;
     width: 128px;/*Taille de l'image. Facultatif mais utile pour avoir des images
                   de la même taille*/
     height: 128px;
     margin-top: -64px; /* moitié de la hauteur */
     margin-left: -64px; /* moitié de la largeur */
 
     }

Résultat :
Voilà...
Steve

[Maxoo]

Mais je sais pas si Nikoalas à des images à tailles fixes ...

[Nikoalas]

Mais je sais pas si Nikoalas à des images à tailles fixes ...

Touché ! Les images ne sont pas en taille fixe, elles sont redimensionnées pour faire au maximum 200px sur la longueur mais la longueur peut être verticale (ce qui n'est pas un problème puisque le centrage horizontal fonctionne) mais la longueur peut aussi être horizontale là, mon image va se placer en haut du div laissant un espace blanc en dessous et c'est assez peu harmonieux.

Merci tout de même pour l'idée... et si y en a d'autres, je suis preneur.

[onirisme]

Dans ce cas essaye d'utiliser :
display: table-cell;

Exemple qui marche chez moi sous FF :
CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.contener {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 300px;
    height: 300px;
    background-color : #CC3300 ;
    margin-right : 0px;
}

HTML

Code :

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

1
2
 
<div class="contener"><img src="pomme.jpg" alt="Image2"></div>

Le résultat : http://onirisme.free.fr/dvp/imageCentree/
A priori je ne vois pas d'autre solution si ce n'est d'utiliser directement des tableaux...
Steve

[Nikoalas]

Merci, le résultat semble super, c'est exactement ce que je cherchais à faire sauf que, sauf que chez moi ça ne donne pas le même résultat du fait que j'utilise un "float: left;" pour caser mes div sur la gauche...

Je précise que je n'ai pas trouvé l'utilité du margin-right: 0px; donc je l'ai supprimé, ai-je eu tort de le faire ? Je l'ai fait parce que je ne voyais pas de différence.

Je vais essayer de trouver mais toute aide est la bienvenue.

Je mets les deux blocs CSS que je fais :

Code 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
#gallery
{
	height: 606px;
	width: 606px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	border: 2px solid black;
	padding: 5px;
}
 
#gallery pic
{
	float: left;
        width: 200px;
        height: 200px;
}
 
.center
{
	display: table-cell;
        vertical-align: middle;
	text-align: center;
        width: 200px;
        height: 200px;
	border: 1px solid black;
}

Code HTML :

Code :

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

1
2
3
4
5
6
<div id="gallery">
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
<div class="center"><img src="cuba2.jpg"></div>
<div class="center"><img src="cuba.jpg"></div>
</div>

Le problème n'en est pas un quand le nombre de photo est inférieur à 4 mais dès qu'il atteint quatre, on voit le problème. Avant je mettais mes photos dans les "<pic></pic>" ce qui faisait que je pouvais avoir 9 photos bien disposées mais pas centrée dans le div... et maintenant qu'elles sont centrées, je ne sais pas comment les mettre à l'intérieur du <pic>.

En espérant avoir été clair,
Nicolas.