Aligner une image verticalement

**pierrot10** · 20/07/2009, 18h12

Bonjour a tous,

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

J'ai ceci:

Code HTML :

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

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

Code CSS :

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

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

**Macmillenium** · 21/07/2009, 14h16

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 css :

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

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 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
 
<!--[if lte IE 7]>
	<style type="text/css" media="screen">
		.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]-->

Ce qui donne :

Code xhtml :

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
 
<!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> 
<!--[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="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.

**pierrot10** · 21/07/2009, 22h20

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?

**Macmillenium** · 22/07/2009, 10h41

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 xhtml :

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
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>

**pierrot10** · 22/07/2009, 16h16

Super merci!!!

**redah75** · 04/11/2009, 15h00

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 :

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

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

Aligner une image verticalement [CSS 2.1]

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager