Alignement verticale d'image dans un div

Version imprimable

03/11/2008, 17h40
xian21

Alignement verticale d'image dans un div

Bonjour,

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

Code:

.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

Citation:

Envoyé par xian21

Bonjour,

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

Code:

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

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

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

Salut,

Merci pour l'aide

Voila un exemple

Code:

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

J'ai rajoute le code que tu ma propose:

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

04/11/2008, 10h13
HiRoN
Citation:

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:

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

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

C'est bon ca fonctionne

Ci dessous le css qui fonctionne

Code:

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

Merci

04/11/2008, 11h53
devyan

Salut,

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

Code:

#ctl00_login_Miniature img {vertical-align:top;}

;)