Alignement verticale d'image dans un div

**xian21** · 03/11/2008, 17h40

Bonjour,

j'essaye d'aligner verticalement mes images dans le haut d'un div.
J'ai ecris le css suviant

Code :

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

.aligntop{ vertical-align:top; background-color:red; height:80px;overflow:auto;}

Mes images restent alignees dans le div vers le bas.
Qu'ai je de faux?

Merci

**HiRoN** · 03/11/2008, 17h56

Envoyé par xian21

Bonjour,

j'essaye d'aligner verticalement mes images dans le haut d'un div.
J'ai ecris le css suviant

Code :

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

.aligntop{ vertical-align:top; background-color:red; height:80px;overflow:auto;}

Mes images restent alignees dans le div vers le bas.
Qu'ai je de faux?

Merci

Salut,

Si ton code est de ce style :

Code :

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

<div id="parent"><img class="fils" alt="" /></div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#parent{ 
   width:XXpx; /* A définir */   
height:XXpx; /* A définir */   
text-align:center;    
vertical-align:middle;  
}
 
.fils {    width:XXpx; /* A définir taille image */ 
  height:XXpx; /* A définir taille Image */ 
  margin-left:auto;    
margin-right:auto; 
   position:relative;    top:50%;    
margin-top:-XXpx;  }

Condition : Connaitre hauteur de l'image donc de .fils et jouer sur les margin. Sachant que margin-top représentent la moitié de la hauteur de l'image (donc du height appliqué à l'image).

Il y a sûrement d'autres façons de faire (ce n'est qu'une piste de réflexion au vu du code que tu fournis...). Si la taille de l'image est fixe et que tu connais la taille du div container, je vois pas vraiment le problème, jouer sur les margin / padding te permettra de placer à ta convenance.

EDit : Tu peux très bien, vu que tu as plusieurs images jouer directement sur le CSS qui leur sera aplliqué. Mais sans + de code, difficile d'aider...

**xian21** · 04/11/2008, 09h39

Salut,

Merci pour l'aide

Voila un exemple

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
 
<!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>
</head>
 
<body>
 
 
<div id="ctl00_login_Miniature" style="background-color:blue; height:80px; vertical-align:top; overflow:auto;" >
<img src="1.jpg" style="border-width:0px;" /><span> &nbsp; </span>
<img src="2.jpg" style="border-width:0px;" /><span> &nbsp; </span>
<img src="1.jpg" style="border-width:0px;" /><span> &nbsp; </span>
<img src="2.jpg" style="border-width:0px;" /><span> &nbsp; </span>
</div>
 
 
 
</body>
</html>

Mon image 1 fait 75px de hauteur tandis que l'image 2 fait 133 px de hauteur.
Les images sont aligne en bas au lieu d'etre aligner en haut comme je le veux

**xian21** · 04/11/2008, 09h46

J'ai rajoute le code que tu ma propose:

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
28
29
30
<!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>
</head>
 
<body>
 
 
<div id="ctl00_login_Miniature" style="background-color:blue; height:80px; vertical-align:top; overflow:auto; width:100%; text-align:left" >
<img src="1.jpg" style="width:100px; /* A définir taille image */ 
  height:75px; /* A définir taille Image */ 
  margin-left:auto;    
margin-right:auto; 
   position:relative;    top:50%;    
margin-top:-37px;" /><span> &nbsp; </span>
<img src="2.jpg" style="width:100px; /* A définir taille image */ 
  height:133px; /* A définir taille Image */ 
  margin-left:auto;    
margin-right:auto; 
   position:relative;    top:50%;    
margin-top:-66px;  " /><span> &nbsp; </span>
 
</div>
 
 
 
</body>
</html>

et ca marche pas.
Et ce que ca correspond bien a ce que tu m'as dit de faire?

**HiRoN** · 04/11/2008, 10h13

Envoyé par xian21

Et ce que ca correspond bien a ce que tu m'as dit de faire?

Pas vraiment...

As-tu essayé, si la structure est de cette forme :

Code HTML :

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

1
2
3
4
<div id="container">
<img alt="" />
<img alt="" />
</div>

Code CSS :

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

1
2
3
 
#container { width:XXpx; }
#container img { margin:15px auto 0 auto; }

En gros, tu crées un div auquel tu définis un largeur. Tu mets tes images qui devrait être séparé de 15px entre elle (simple code théorique, je n'ai pas le temps de le tester).

**xian21** · 04/11/2008, 11h52

C'est bon ca fonctionne

Ci dessous le css qui fonctionne

Code :

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

1
2
.aligntop{  background-color:white; height:80px; vertical-align:top; overflow:auto;}
.miniaturelien{ margin-left:10px; border:0px; vertical-align:top;}

Merci

**devyan** · 04/11/2008, 11h53

Salut,

Bizarrement pour les images il faut répéter l'alignement "top" pour qu'elles le prennent en compte...

Code :

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

#ctl00_login_Miniature img {vertical-align:top;}

Alignement verticale d'image dans un div

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager