28220 sujets

CSS et mise en forme, CSS3

[resolu]Alignement vertical - images dans un DIV

Bonjour,
Je débute en CSS et j'aurais besoin de votre aide SVP.

J'ai 2 images dans un div.
ça se présente ainsi :

#le_DIV{
height: 68px;
padding-top: 3px;
background: #d9dde3;
background-image: url("design/img/logo_fond.gif");
background-repeat:repeat-x;}

#image1{
margin-left: 10px;
float: left;}

#image2{
margin-right: 10px;
float: right;}


Je souhaite centrer verticalement mes images (surtout image2 car sa taille va varier lors de la navigation sur le site).

J'ai bien trouvé ceci
mais le centrage verticle n'est pas compatible avec IE et les marges négatives ne me conviennent pas, puisque mon image n'a pas des dimensions définies...
Il serait peut-être possible de récupérer grâce au php les dimensions de l'image et d'avoir une fuille de style en conséquence...mais ça complique vraiment les choses...

Quelqu'un a une astuce ?
merci

à +
Modifié par Graph-Site (25 Jan 2007 - 12:22)
Si tu fait un div, avec une hauteur défini, tu peux faire ça 

.cadre {
width: 200px;
height: 100px;
line-height: 100px;
}

line-height aligne verticalement le contenu de la div. Aprés, suffit de faire un div pour chaque image.
Modifié par Vince71 (14 Jun 2005 - 23:31)
hum... Smiley hum
Vince71 a écrit :

line-height aligne verticalement le contenu de la div.

line-height n'est pas une propriété pour aligner verticalement.
Recommandation CSS2 du W3C a écrit :

Quand on applique cette propriété à un élément de type bloc dont le contenu est composé d'éléments de type en-ligne, celle-ci spécifie la hauteur minimale de chacune des boîtes en-ligne générées.

(...)

Quand on l'applique à un élément de type en-ligne, celle-ci spécifie la hauteur exacte de chacune des boîtes générées par l'élément.

http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-line-height

Faudrait plutôt regarder du côté de la propriété vertical-align :
http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align

Ce sujet pourrait t'intéresser :
http://forum.alsacreations.com/topic.php?fid=4&tid=1118

En particulier cette solution :
http://forum.alsacreations.com/topic.php?fid=4&tid=1118#p11581

Et plus précisément le post suivant :
http://forum.alsacreations.com/topic.php?fid=4&tid=1118#p11582
Bin ça marche, j'ai vu ça dans le livre de Jeffrey Zeldman, "les standarts du web", mais lui même ne comprenait pas pourquoi ça marche

Smiley sweatdrop
Modifié par Vince71 (15 Jun 2005 - 12:30)
Vince71 a écrit :

Bin ça marche, j'ai vu ça dans le livre de Jeffrey Zeldman, "les standarts du web", mais lui même ne comprenait pas pourquoi ça marche

Perso, j'utiliserais seulement après avoir épuisé toute autre forme de positionnement Smiley cligne
Sujet clos
Aller à