[Résolu] Centrer div qui contient div float:left (responsive)

Bonjour,

Je suis en train de créer un site web responsive pour les mobiles, mais ça me complique la vie.

J'ai toujours fait mes div avec des positions fixe et mes éléments centrés ont toujours fonctionnés... Sauf pour cette fois-ci.

Alors voilà, j'ai un div qui englobe plusieurs div de type class.

<div id="listemenu">
<div class="box">ma boîte</div>
<div class="box">ma boîte</div>
<div class="box">ma boîte</div>
</div>

#listemenu {
        height:auto;
	overflow: hidden;
	top:0px;
	left:0px;
	width: 80%; margin:0px auto; 
        position: relative;
	
	
}

.box{ 
				width: 325px; 
				height: 260px; 
				margin:10px auto;
				float:left;
				background:#161613; 
				border: solid 2px #40b2d6; 
				overflow: hidden; 
				position: relative;
				
				
			}

Mes boîtes sont en float:left et mon div listemenu est en margin:0 auto; et en width:80% mais cela ne fonctionne pas, évidemment car mes boîtes sont alignées vers la gauche.

J'aimerais donc trouver une solution pour que mes boîtes (taille fixe obligé) soient alignées selon la grandeur de l'écran et qui affiche le nombre de boîte possible selon la résolution d'écran(3-4-5 boîtes). Tout ça toujours centré.

J'ai fouillé sur le net, mais les réponses qui reviennent toujours c'est de positionner mon div principal en taille fixe et ce n'est pas cela que je veux, sinon ce serait réglé il y a longtemps...

Merci d'avance pour votre aide, le site presse un peu.
Modifié par sydgie (23 Aug 2013 - 16:24)

Salut,

Pourrais-tu faire l'effort stp de nous montrer ton code qui pose problème dans un jsFiddle ou autre pour qu'on puisse t'aider à débuguer?

Avec le peu d'infos que tu nous donne on ne peu rien faire de plus que te dire.. Oui et ?

OUi désolé j'ai peser sur un raccourcie et mon post a été publié avant que je le termine

En gros, tu aimerais que tes blocs soient toujours centré si y en a 1/2/3/4 qui sont affiché selon la largeur de l'écran ?

Si c'est le cas voici la solution :
http://jsfiddle.net/FVEt2/1/

Modif apporté :

#listemenu {
height:auto;
overflow: hidden;
top:0px;
left:0px;
width: 80%; margin:0px auto; 
position: relative;
text-align:center;/* On centre les éléments */		
}

.box{ 
width: 325px; 
height: 260px; 
margin:10px auto;
vertical-align:middle; /* On aligne les éléments au milieu */
 display:inline-block;/* On le remplace au float:left; */
background:#161613; 
border: solid 2px #40b2d6; 
overflow: hidden; 
position: relative;
text-align:left;/* On réinitialise les élements centré a gauche */						
}

Modifié par artsx (23 Aug 2013 - 16:38)

Ahh! Je suis si contente, ça fonctionne numéro un, je garderais en note pas loin ce code pour les prochains à venir. Je vous remercie énormément!!

Si rapide en plus!

P.S. Votre portfolio est TELLEMENT beau!!

Au plaisir

Problème avec explorer 7-8-9 par contre :s

Finalement c'est mon net qui a lâcher ...
Modifié par sydgie (23 Aug 2013 - 16:47)

Bizarre, je viens de vérifier, inline-block est pris en compte par ses navigateurs (le 7 par certain) mais 8 et 9 oui.
Je suis sur mac ça va être compliqué de débuguer. J'ai pas ce qui faut sous la main.
Y a peu être une piste de solution ici (la partie IE) :
http://www.alsacreations.com/article/lire/1209-display-inline-block.html

J'ai retesté et cela fonctionne, le net où je travail a des problème et du coup, il n'a pas téléchargé tout le code (donc bug).

Désolé mon erreur...

ça fonctionne numéro un sur explorer finalement ^^

tant mieux, je déteste IE