[Resolu] Centrer 2 images de taille différente

Bonjour,

je commence a peine en CSS, et j'ai déja fait d'enorme progres...

je suis devant un petit probleme que je n'arrive pas a resoudre.

Comment est il possible de centrer horizontalement deux images de taille différentes dans un div ?

voici actuellement mon code

<div id="information">
 <ul id="headinginformation"></ul>
 <p class="retour"><a href="#">Test</a><a href="#">Test2</a>
 <a href="#">Test3</a><a href="#">Test4</a>
 <a href="#">Test5</a><a href="#">Test6</a>
 <a href="#">Test7</a></p>
   <ul class="infoimage">
     <a href="#"><img src="images/mon_image" border="0"></a>
   </ul>
  <p class="center">Test8</p>
  <ul class="infoimage" ><img src="images/min_image2"></ul>
  <ul id="bottominformation"></ul>
</div>

et voici le contenu CSS

#information{
	margin: 0px 0px 0px 0px;
	font-size: 80%;
	width: 170px;
	background-image: url(../../images/infobox/cadre_centrec.gif);
}

#headinginformation{
	margin: 0;
	height: 30px;
	width: 100%;
	font-size: 80%;
	background: url(../../images/infobox/info.gif) no-repeat;
}

#bottominformation{
	background: url(../../images/infobox/cadre_bass.gif) no-repeat;
	height: 20px;
	margin: 0;
	width: 100%;
}

.retour a {
display: block;
padding: 0.5px;
padding-left: 5px;
}

.infoimage {
margin-left:5%;
margin-right:5%;
}

ul {
margin: 0px 0px 0px 0px;
}

p {
padding: 0;
margin: 0;
}

p.center {
text-align:center;
}

Merci d'avance

++
fab
Modifié par fab27 (09 Mar 2005 - 14:25)

Voici le schéma rapidos pour y arriver :

DIV1

DIV11 - IMG1 - /DIV11

DIV12 - IMG2 - /DIV12

/DIV1

Puis en CSS :

DIV1 en 100%
DIV11 et DIV12 en float et width: 50% et text-align: center
Margin auto left et right sur les images

C'est comme ca à coup de nez, je me plante peut être !

Voili voilou, plus qu'a coder !

bonjour,
peut être une petite piste:
tu peux dans la propriété background de ta css positionner ton image dans ta div comme ceci:

 background-image: url(../../images/infobox/cadre_centrec.gif) 50% 50%;

Le premier nombre correspond à l'alignement horizontal, le second à l'alignement vertical.
Ces valeurs peuvent également être exprimées en pixels.
Il se peut toutefois que la propriété repeat soit indispensable dans ce cas.
Elle prendra donc la valeur "no-repeat" ce qui te donne:

 background-image: url(../../images/infobox/cadre_centrec.gif) no-repeat 50% 50%;

En espérant que cela te file un petit coup de main.
Edit 5mn aprés: (mea culpa)
Tu ne voudrais qu'une seule div si j'ai bien compris.
J'ai bien peur que ce ne soit pas possible à moins d'un txt align:center qui modifiera également la position de ton texte...
La méthode de Julien est plus appropriée il me semble.

DIV 1

DIV 1.1
IMG1
/DIV 1.1

DIV 1.2
IMG2
/DIV 1.2

/DIV 1

Dans ce cas il te suffit à défaut d'une "id" de définir une "classe" en text-align center.
ce qui donne:

<div id="information"><div class="taclasse"><img 1></div><div class="taclasse"><img 2></div></div>

ta css pour la classe de tes div 1.1 et 1.2

div.taclasse{text-align:center; width:100%}

Have a good work!
Modifié par lautrec (09 Mar 2005 - 12:44)

Salut,

Pour centrer des éléments "en ligne" (comme du texte ou des images), il suffit effectivement d'utiliser la propriété "text-align" qui s'applique à toutes les balises en-ligne.
Modifié par Raphael (09 Mar 2005 - 13:19)

Merci pour toutes ces reponses.

je vais essayer de medebrouiller avec tout ce qui a été dit

Merci encore

++
fab