Aligner une image verticalement

Version imprimable

20/07/2009, 18h12
pierrot10

Aligner une image verticalement
Bonjour a tous,

Je me prend le chou pour un truc bete mais pourtant je ne trouve pas de solution.

J'ai ceci:
Code:

1 2 3 4 5 6 <div clas="display_logo"> <a href=""> <img src="" /> </a> </div>
Code:

1 2 3 .display_logo{ border:0px dotted #cccccc; float:left; height:130px; width:130px; padding:3px; margin:1px;} .display_logo img{margin:auto;}
Ceci est une des solution, mais j'en ai essayé des tonnes...

Comment pourrais-je faire pour que mon image soit toujours alignée verticalement.

NB. Ces code sont une partie. En réalité, j'ai une boucle php et qui va afficher les logos d'une 10ene de membre et chaque logo ont une hauteur différente qui doivent tous êtes aligné verticalement

Merci pour votre aide

Bonjour,

La propriété vertical-align est censé aligner les boites en ligne verticalement par rapport à la hauteur d'une ligne de texte (line-height) qui dépend de la taille du font.
Dans certains cas de figures (parent et enfant de hauteur fixe par exemple), l'augmentation du font-size ou line-height permet d'aligner l'élément inline verticalement.
Ce n'est pas le cas ici étant donné que la hauteur de ton image est variable.

Il reste la propriété display:table-cell qui simule le comportement d'une cellule de tableau, il suffit donc de l'attribuer au conteneur parent avec un vertical-align:middle :
Code:

1 2 3 4 5 6 7 8 9 .display_logo{ border:0 dotted #cccccc; height:130px; width:130px; padding:3px; margin:1px; display:table-cell; vertical-align:middle; text-align:center; }
Malheureusement IE7 et versions inférieurs ne supportent pas display:table-cell.
L'utilisation du positionnement absolute couplé au JavaScript s'impose en détectant l'offsetHeight de l'élément.
Les expression() CSS de Microsoft permettent d'introduire du JS dans la CSS.
La solution pour IE7 et versions inférieurs :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 
Ce qui donne :
Code:

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document Sans Nom</title> <style type="text/css"> .display_logo{ border:1px dotted #cccccc; height:130px; width:130px; padding:3px; margin:1px; display:table-cell; vertical-align:middle; text-align:center; } .display_logo a { display:inline-block; } </style>  </head> <body> <div class="display_logo"> <a href=""> <img src="test.gif" alt="" /> </a> </div> </body> </html>
J'ai rajouté un display:inline-block; à l'élément <a> pour l'adapter à la taille de l'image.

21/07/2009, 22h20
pierrot10

Houa! merci je n'aurais jamais touvé.

Suite a ceci, j'ai une petite question:

1. Le margin ne fonctionne plus
http://www.que-faire-ce-week-end.ch/nos-membres.php

Comment puis-je alors faire pour que mes bloque ont un leger espace

Ensuite si j'ai 6 membres, es-ce que le 5 et 6 ème se mettront à la ligne, puisque je n'ai plus de float?

Oui, margin ne fonctionne pas sur les éléments de rendu table-cell et table-row et de toute façon, faut flotter les blocs pour IE7-.
Tu peux rajouter un conteneur flottant et lui attribuer les margin :

Code:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document Sans Nom</title> 
<style type="text/css">
        .conteneur_logo {
                float:left;
                margin:2px;
        }
 
        .display_logo { 
                border:1px dotted #cccccc; 
                height:130px; width:130px; 
                padding:3px;
                display:table-cell;
                vertical-align:middle;
                text-align:center;
        }
        
        .display_logo a { 
                display:inline-block;
        }
</style> 
<!--[if lte IE 7]>
	<style type="text/css">
		.display_logo {
			position:relative;
		}
 
		.display_logo a {
			position:absolute;
			top:50%;
			left:50%;
			margin-top:expression(-this.offsetHeight/2);
			margin-left:expression(-this.offsetWidth/2);
		}
	</style>
<![endif]-->
</head>
 
<body>
 
<div class="conteneur_logo">	
	<div class="display_logo">
		<a href="">
			<img src="test.gif" alt="" />
		</a>
	</div>
</div>
 
<div class="conteneur_logo">	
	<div class="display_logo">
		<a href="">
			<img src="test.gif" alt="" />
		</a>
	</div>
</div>
 
<div class="conteneur_logo">	
	<div class="display_logo">
		<a href="">
			<img src="test.gif" alt="" />
		</a>
	</div>
</div>
 
<div class="conteneur_logo">	
	<div class="display_logo">
		<a href="">
			<img src="test.gif" alt="" />
		</a>
	</div>
</div>
 
</body>
 
</html>

22/07/2009, 16h16
pierrot10

Super merci!!!
04/11/2009, 15h00
redah75
Bonjour,

permettez moi de reveiller ce super topic avec cette superbe reponse qui me sauve :)

j'aurais juste une toute petite question par rapport a:
Code:

1 2 3 4 5 6 7 .display_logo a { position:absolute; top:50%; left:50%; margin-top:expression(-this.offsetHeight/2); margin-left:expression(-this.offsetWidth/2); }
etant donne que je veux que mes image soient toujours en bas, que dois je mettre pour top et margin-top?

Merci infiniment
04/11/2009, 17h53
pierrot10
Pour qu'elle soit en bas, je mets a un
Code:

1 2 3 4 .display_logo a { position:absolute; bottom:0px; }
et je ais attention que le block parent soit avec

Code:

position:relative.

Essaye pour vérifier
09/11/2009, 16h13
redah75

ca l'air de marcher avec Safari et IE8, faudrait que je teste avec d'autres navigateurs. mais j'ai tout de meme un petit probleme parce que j'utilise des reflets qui s'affichent par rapport a la hauteur de l'image. et du coup ca me fausse l'alignement: http://iifiir.org/new/index-home.php
je ne sais trop quoi faire!!
17/11/2009, 14h02
redah75

j'ai teste sur un poste qui a IE7 et je me rend compte qu'il y a un gros probleme de compatibilite!! les couvertures sont presque superposees :((

j'ai ensuite verifie les principaux navigateurs utilise sur le site et a ma grande surprise IE6 represente 74,8% des navigateurs....

y a t il une grande difference entre IE6 & IE7?
devrais je afficher un message en disant : "le site est concu et optimise pour IE8, veuillez telecharger et installer la derniere version..." ???

Merci
18/11/2009, 18h23
redah75

oh lalaaaaa, je suis vraiment largué et je pense que je vais bientot disjoncter... 8O

mon script marche bien sur Safari, Firefox, Opera, ie8 mais alors pas du tout sur ie6 & 7!! Me*de a Microsoft qui n'arrive pas a uniformiser ses navigateurs a la con.......!!

auriez vous une idee svp de ce qui pourrai bien cloche sur ma page: http://iifiir.org/new/index-home.php ???

j'ai 2 autres question qui me perturbent depuis bien longtemps:
1- pour afficher une liste d'elements par example, est il mieux d'avoir recours a <ul> & <li> ou plutot des <div style="display: inline;"></div> ??

2- pour personnaliser les listes, faut il mettre margin:0; padding:0; et list-style: none; dans la balise ul ou li?

MErci de votre aide
20/11/2009, 08h04
pierrot10
IE c'est de la m.

Oui moi je mettrai
padding et margin à 0 pour ul et li.

Mais attention, j'attribuerai plustot une class à mon ul et li comme ceci
Code:

1 2 li.monli{} ul.monul{}
Code:

1 2 3 4 <ul class="monul"> <li class="monli"></li> <li class="monli"></li> <ul class="monul"></ul>
Je ne me souviens si c'est le ul ou li que IE n'interorette pas la meme chose que les autres navigateurs. Et puis après tu donnes la vakleur que tu souhaites pour ton padding et margin