2010-09-21 8 views
2

Considérons le code HTML et CSS suivants. Le résultat souhaité est que les deux boîtes roses sont centrées dans la boîte verte unique. Le texte n'est PAS centré. Il y a un rembourrage sur la gauche et la droite de chaque boîte. Je devrais être en mesure d'avoir 1 ou plusieurs de ces boîtes, jusqu'à 8; ils devraient tous flotter pour remplir le conteneur div. Je me suis cogné la tête sur celui-ci depuis des semaines, et rien que je lis ou essaye semble fonctionner - marge: auto, affichage: inline, etc. etc. J'ai ajouté le div box-margin pour créer le remplissage en essayant d'utiliser margin: auto, mais ça n'a toujours pas eu le résultat que je cherchais. Halp?Encore un autre centre DIVs à l'intérieur d'une autre question DIV

HTML

<body> 
    <div id="page"> 

     <div id="main"> 

      <div class="box-group"> 

       <div class="box-margin"> 
        <div class="box"> 
         <h2>Data</h2> 
         <ul> 
          <li><a href="/URL">Link</a></li> 
         </ul> 
        </div> 
       </div> 

       <div class="box-margin"> 
        <div class="box"> 
         <h2>Reports</h2> 
         <ul> 
          <li><a href="/URL/">Link</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

CSS

body 
{ 
    margin: 0; 
    padding: 0; 
} 
#page 
{ 
    width: 95%; 
    min-width:800px; 
    border: thin solid red; 
} 
#main 
{ 
    padding: 30px 30px 15px 30px; 
    margin-bottom: 30px; 
    min-width: 875px; 
    border: thin solid black; 
} 
.box-group 
{ 
    width: 100%; 
    padding: 10px; 
    border: thin solid green; 
} 
.box-margin 
{ 
    margin: auto; 
    width: 275px; 
    float: left; 
    padding: 15px; 
} 
.box 
{ 
    border: thin ridge pink; 
    height: 200px; 
    width: 250px; 
}  
+0

"Le résultat souhaité est que les deux boîtes roses sont centrées dans la boîte verte unique Le texte n'est PAS centré." - Donc vous voulez que le texte soit centré ou pas? –

+0

Désolé Christopher - Le texte ne doit pas être centré, c'est pourquoi l'alignement du texte ne fonctionnera pas. – morganpdx

Répondre

1

Consultez cette page sur centered floats. Il a un truc sympa qui pourrait ne pas fonctionner pour vous (il va les centrer en tant que groupe, mais pas par ligne, si elles enveloppent), mais il détaille également un correctif pour display: inline-block dans IE.

+0

C'est vraiment drôle Tim: "Voici une solution qui ne marchera pas pour vous." Ha! Merci, je vais y jeter un coup d'oeil :) – morganpdx

+0

Haha bien ta question m'a fait curieux, puisque j'ai déjà rencontré ce problème. J'ai trouvé cette page et j'ai trouvé que c'était génial, mais j'ai vu la mise en garde. Il a encore beaucoup d'informations utiles cependant. –

+0

Je l'ai essayé et ça a fait tourner la page TOUS LES SORTS de fous. Soit je me trompe, soit ça ne marche pas. Bien que je sois fou, je suppose que je vais peut-être me tromper ... – morganpdx

0

Flotteurs restera toujours au bord gauche ou à droite de leur contenant. Vous devriez utiliser display: inline-block pour cela.

Questions connexes