Centrage auto d'images dans un div de differnets dimentions

bonjour a tous,
j'ai un petit probleme:
j'ai une mise en page geree par une feuille de style css externe pour toutes mes pages,
dans ce pages j'ai une photo, les photos sont de different dimention sur differentes pages et je voudrais que elle soit centree automatiquement dans le div
du code pour mieux comprendre

HTML

<div id="leftFramePhoto">
	<h1>titre1</h1>
	<h2>titre2</h2>
		<div id="photo"><img src=".this.jpg" width="370" height="185" /></div>image
		  </div>

CSS

#leftFramePhoto {
	position:absolute; 
	left:0px; 
	top:75px; 
	width:400px; 
	height:335px;
	z-index: 8;
	text-align: left;
	background-image: none;
	background-repeat:no-repeat;
	font-size: 10px;
	border : 0px none #666666;
    }
	
	
#leftFramePhoto h2{
font-size: 10px;
	position:absolute;
	text-align: right;
	top: 5px;
	right: 2px;
}	

#leftFramePhoto h1{
font-size: 10px;
	position:absolute;
	text-align: left;
	top: 5px;
	left: 2px;
}	
	
#photo
{ 	
position:absolute;
	left: 50%;
	top: 50%;
	width:370px; 
	margin-left:  -185px;
	height:185px; 
	margin-top: -92px;
	border : 1px solid #666666;
}

avec cette solution l'image ce centre automatiquement mais je doit deffinire de tout façon les dimention de l'image

il y a une soultion si par examble je insere dans une autre page une image de 400x300 pixel et garder la meme feuille de style ????

si vous avez des liens ou des idee
merci

ciao
Modifié par thetoad (02 Jun 2005 - 12:21)

Salut,

a priori ce serait ça :

#photo {
text-align:center;
}

merci clb56

oui ca marche pout l'allignement horizontal mais pour le vertical???

j'ai essaie avec

#photo
{ 	
text-align:center;
vertical-align: middle;
	border : 1px solid #666666;
}

mais ca marche pas

thetoad a écrit :
merci clb56

oui ca marche pout l'allignement horizontal mais pour le vertical???

j'ai essaie avec

#photo
{ 	
text-align:center;
vertical-align: middle;
	border : 1px solid #666666;
}

mais ca marche pas

Salut,

N'hésite pas à consulter la FAQ pour les questions souvent posées :
http://forum.alsacreations.com/faq/#item3

merci Raphael,

j'ai deja lu l'article http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

et autre FAQ

mais ou je sait pas bien lire ou j'ai pas trouvee la souluce a mon probleme
tu as un lien plus precis

j'ai lu aussi ca : http://evolt.org/article/rdf/17/60369/
au paragraphe 8 et 9
mais je comprend pas trop les histoire de container avec position:relative
et line-height
Modifié par thetoad (02 Jun 2005 - 10:37)

j'ai trouvee cette solution
CSS

#photocontainer
{
height: 335px; 
line-height: 335px;
text-align:center;
}

#leftFramePhoto img
{ 
vertical-align: middle;
border : 1px solid #666666;	
}

HTML

<div id="photocontainer"><img src="braccio.jpg" /></div>

ca marche super sous Firefox mais pas sous IE
va savoir pourquoi ???

une idee ???

a écrit :
j'ai deja lu l'article

Je ne te parlais pas ce cet article mais de la FAQ, et notamment celui-ci : http://evolt.org/article/rdf/17/60369/

Il indique tout simplement qu'il suffit de donner un line-height égal à la hauteur de ton conteneur pour centrer un élément en ligne

Evolt a écrit :

8. Vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.

Hmmm... not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!

a écrit :
mais je comprend pas trop les histoire de container avec position:relative
et line-height

Nul besoin de position relative. Line-height + height suffisent

thetoad a écrit :
j'ai trouvee cette solution
CSS

...
vertical-align: middle;
...

comme expliqué dans la FAQ : "vertical align" n'est pas fait pour ça !
Modifié par Raphael (02 Jun 2005 - 11:20)

a écrit :
comme expliqué dans la FAQ : "vertical align" n'est pas fait pour ça !

oui c'est bien ce que j'avais compris...

mais j'arrive pas à le faire functioner sans le "vertical align"

#photocontainer
{
height: 335px; 
line-height: 335px;
text-align:center;
}

#leftFramePhoto img
{ 
border : 1px solid #666666;	
}

ca marche pas...

il y a quelque chose qui m'echappe la dedans je crois

et de plus j'ai trouvee ca...
http://www.positioniseverything.net/explorer/lineheightbug.html





bon si ca continue je fait ca en JS ou PHP mais c'est vraiement pas possible de le faire en css ???

<div id="photocontainer"><img src="braccio.jpg" [b]alt="texte alternatif"[/b] /></div>

#photocontainer {
height: 335px;
line-height: 335px;
text-align:center;
}

#photocontainer img {
border : 1px solid #666666;
}

merci Raphael pour ton aide...
mais ca marche toujour pas...

en fait #leftFramePhoto est un <div> conteneur de #photocontainer

bon je fait une petite page de test et je la mets en ligne ....

thetoad a écrit :

bon je fait une petite page de test et je la mets en ligne ....

Oui parce que là je ne vois pas trop le rapport avec #leftFramePhoto
Modifié par Raphael (02 Jun 2005 - 11:54)

Après test, il y'a effectivement un problème sur IE :

-exemple qui ne fonctionne PAS sur IE :

#photocontainer {
height: 335px ;
line-height: 335px ;
text-align: center ;
border : 1px solid yellow ;
}

#photocontainer img {
border : 1px solid #666666;
}

<div id="photocontainer">
<img src="braccio.jpg" alt="texte alternatif" />
texte
</div>

-exemple qui fonctionne sur IE :

#photocontainer {
height: 335px ;
line-height: 335px ;
text-align: center ;
border : 1px solid yellow ;
}

#photocontainer img {
border : 1px solid #666666;
}

<div id="photocontainer">
texte
</div>

voici le test
http://www.sinedie.org/lickthetoad/test/bio.php

apparement ca marche avec du text mais pas avec une image....