28173 sujets

CSS et mise en forme, CSS3

Centrer plusieurs div

Bonsoir,
J'essaye de centrer plusieurs petites div dans une plus grande mais je n'y arrive pas Smiley bawling .

Voila le vilain code :

<body>
<div class='categorie'>
  <div class="cat_title">Nom Cat&eacute;gorie 1<hr></div>
  <div class="member"> <img src="img.gif" alt="zderfez" />
      <div class="member_info">
        <p><strong>Nom</strong> : Nom + Prenom </p>
        <p><strong>Promo</strong> : Ix</p>
        <p><strong>Description</strong> bla bla bla bla bla</p>
      </div>
  </div>
  <div class="member"> <img src="img.gif" alt="zderfez" />
      <div class="member_info">
        <p><strong>Nom</strong> : Nom2 + Prenom2 </p>
        <p><strong>Promo</strong> : Ix </p>
        <p><strong>Description</strong> : bla bla bla bla bla</p>
      </div>
  </div>
</div>
</body>



pour ce qui est du css (une partie):


.member {
	position: relative;
	float: left; /* si je l'enleve chaque div est bien centrée mais elles sont l'une en dessous de l'autre et non en contigu comme j'aimerais */
	text-align: center;
	width: 150px;
	height: 170px;
	overflow: hidden;
	border: 0;
	padding: 5px;
	margin-right: auto;
	margin-left: auto;
}

.categorie {
	width: 500px;
	text-align: center;
}


Donc voila, je sais pas si vous avez compris ce que je voulais obtenir donc je récapitule :
- Une grande div de 500px de large
- Qui contient un nombre indéfinis de div de 150px par 170px
- Et qui soient centrées à la suite l'une de l'autre tant qu'il y a de la place en largeur.

Y a t'il un moyen pour faire cela ? Parce que la je tourne en rond...
Merci.
j'ai peut etre une piste avec ca :
emuler_un_float_center_sur_un_menu_horizontal
Ca va pas etre evident à adapter.
pour l'instant j'ai juste rajouté display: inline; et enlevé float et marges dans .members mais ca ne marche pas. J'ai essayé en laissant juste l'image dans le div et ca marche bien mais bon j'aimerais bien le texte en dessous de chaque image :s
Quelqu'un a une idée ?
Modifié par utoz07 (29 Jan 2008 - 00:08)
Sujet clos
Aller à