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

**pierrot10** · 04/11/2009, 17h53

Pour qu'elle soit en bas, je mets a un

Code :

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

1
2
3
4
.display_logo a {
			position:absolute;
			bottom:0px;
		}

et je ais attention que le block parent soit avec

Code :

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

position:relative.

Essaye pour vérifier

**redah75** · 09/11/2009, 16h13

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

**redah75** · 17/11/2009, 14h02

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

**redah75** · 18/11/2009, 18h23

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

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

**pierrot10** · 20/11/2009, 08h04

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 :

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

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

Code :

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

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

Aligner une image verticalement [CSS 2.1]

Positionnement en CSS

Discussions similaires

Partager

Partager