Plusieurs divs flottantes centrées dans une mise en page liquide

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?

Source

2010-10-12 Craig Ward

Ils ne sont jamais centrés pour moi en utilisant votre code? –

La solution la plus simple consiste probablement à supprimer le style float: left des boîtes et à remplacer la propriété display par inline-block. Alors tout ce que vous devez faire est de text-align: centre sur le 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; text-align:center } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block } 
</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>

Vous pouvez tester le code ici: http://jsbin.com/uqamu4/edit

Source

2010-10-12 10:03:58

Probablement la meilleure solution, mais ne fonctionnera pas dans IE6 et 7 –

Salut Viktor, Le problème avec c'est les boîtes ne pas envelopper. Je veux que cet affichage fonctionne sur n'importe quel appareil. Par exemple, un ordinateur portable normal montrera probablement 3 boîtes côte à côte, mais un iphone ne ferait que montrer l'un sur l'autre. Mais si quelqu'un change la fenêtre de sorte qu'il frappe une case à la ligne suivante, il devrait toujours centrer toutes les cases –

En fait, ignorez-moi. On dirait que ça marche mais ça ne montre que 2 côte à côte au moment où je peux changer. Cheers :) –

Ce ne fonctionnera pas dans IE 8 ou moins, ne savent pas à propos de 9, mais depuis votre utilisation de max-width et min-width qui ne fonctionnent pas là non plus Je l'afficherai quand même.

<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; text-align:center; } 
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;} 

</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> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

Source

2010-10-12 10:05:02

Fonctionne dans IE8, mais pas 7 –

ne fonctionnait pas dans mon IE8 ... –

Vous pouvez utiliser text-align: center dans l'emballage et display: inline-block pour les boîtes à les faire se comporter comme des éléments de texte normaux qui sont centrés, peu importe quoi.

caveat: ne fonctionne pas dans IE6 et IE 7. Travaille dans Chrome et FF

jsFiddle here.

Source

2010-10-12 10:05:45

La solution qui a fonctionné pour moi:

<style> 
    body { 
     /* To center the list */ 
     text-align: center; 
    } 

    #wrapper { 
     /* To reset 'text-align' to the default */ 
     text-align: left; 

     display: inline; 
    } 

    .box { 
     display: inline-block; 
    } 
</style>

Source

2014-07-13 18:50:49 Blackbird

Plusieurs divs flottantes centrées dans une mise en page liquide

Répondre

Questions connexes