J'ai une idée d'une mise en page que j'aimerais utiliser, mais je n'arrive pas à la faire fonctionner correctement. J'espère que quelqu'un ici pourrait être en mesure d'aider car j'ai passé des heures à chercher.Plusieurs divs flottantes centrées dans une mise en page liquide
La disposition est comme ça.
Un div div héberge 6 divs enfants. Ces divs enfants doivent être centrés à ALL fois, quelle que soit la taille de la div wrapper.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
</html>
Le problème est lorsque le navigateur est redimensionnée plus petit et une boîte est frappé sur la ligne ci-dessous les cases se descendre à gauche, alors que je veux qu'ils soient toujours centrés. Est-ce possible en utilisant css pur ou dois-je utiliser un peu de jquery?
Ils ne sont jamais centrés pour moi en utilisant votre code? –