Problème CSS - centrage des divs flottants à l'intérieur d'un conteneur

Je rencontre des problèmes avec le centrage d'un groupe de divs flottants. J'ai cherché SO un peu (en particulier here et here), mais il me semble qu'il manque quelque chose. Je posterai mon code et nous espérons que quelqu'un ici peut voir ce que le problème est ...Problème CSS - centrage des divs flottants à l'intérieur d'un conteneur

Ce que je voudrais accomplir est quelque chose le long de ces lignes

screenshot http://efredericks.net/layout.PNG

Le comportement que je suis En ce moment, on voit que tout est flottant correctement, mais poussé vers la gauche. Peu importe ce que j'ai fait, je n'arrive pas à le centrer.

Mon conteneur externe est correctement centré dans le navigateur, mais rien à l'intérieur ne l'est.

HTML

<body> 
    <!-- outer_container - centers for IE --> 
    <div id="outer_container"> 

    <!-- container - wrapper for content --> 
    <div id="container"> 

     <!-- header - logo : menu --> 
     <div id="hdr"> 

     <div id="hdr_right"> 
      <h1><a href="#" id="lhome">logo</a></h1> 
      <div id="menu"> 
      <ul> 
      <li><a id="menu_i1" href="#">item 1</a></li> 
      <li><a id="menu_i2" href="#">item 2</a></li> 
      <li><a id="menu_i3" href="#">item 3h</a></li> 
      </ul> 
      </div> 
     </div> 

     <div class="clear"></div> 

     </div> 
     <!-- /header --> 

     <!-- main --> 
     <div id="main"> 

     <!-- problem area here --> 
     <div id="outer"> 
      <div class="inner">a</div> 
      <div class="inner">b</div> 
      <div class="inner">c</div> 
      <div class="clear"></div> 

      <div class="inner">a</div> 
      <div class="inner">b</div> 
      <div class="inner">c</div> 
      <div class="clear"></div> 
     </div> 

     </div> 
     <!-- /main --> 

    </div> 
    <!-- /container --> 

    </div> 
    <!-- /outer_container --> 

</body>

CSS

* { 
    margin: 0px; 
    padding: 0px;  

    font-family: Tahoma, Arial, sans-serif; 
    color: #888750; 
} 

img { 
    border: 0px; 
} 

body { 
    background: #000; 
} 

    margin: 0 auto; 
    position: relative; 
} 

#hdr { 
    background: #000; 
    height: 99px; 
} 

#hdr_right { 
    margin: 30px 2px 0px 0px; 
    height: 75px; 
    float: right; 
} 

#hdr img { 
    float: left; 
    border: 0px; 
    margin: 5px 0px 0px 5px; 
} 

#hdr ul { 
    margin-top: -10px; 
} 

#hdr li { 
    float: left; 
    padding: 0px 5px; 
} 

#main { 
    text-align: left; 
    background: #333; 
} 

.clear { 
    clear: both; 
} 

#outer { 
    overflow: auto; 
    padding: 5px; 
    width: 790px; 
    margin: 0 auto; 
    text-align: center; 
} 
.inner { 
    float: left; 
    background: #181818; 
    margin: 5px; 
    width: 200px; 
}

Source

2010-07-26 espais

Votre définition de «centre» est très très «spécifique». Habituellement, lorsque vous «centrez» quelque chose, vous centrez une boîte à l'intérieur d'une autre. Vous demandez à déplacer automagiquement beaucoup d'éléments dans la position que vous avez spécifiée, pouvez-vous vraiment appeler ce centrage? Ou si j'ai mal compris, pouvez-vous faire une image réelle de ce dont vous avez besoin? Et cela * sonne * comme si vous vouliez juste utiliser 'inline-block' et' text-align: center' au lieu de flotter. C'est difficile à dire parce que vous ne montrez pas votre version idéale et finalisée de ce que vous VOULEZ vraiment. –

ok, j'ai ajouté une capture d'écran rapide et sale du résultat final que j'aimerais voir – espais

Avez-vous considéré 'inline-block' et' text-align: center' sur l'élément parent? –

D'après ce que je comprends que vous voulez que les divs dans le div#main à centrer et non de la gauche un peu?

Si tel est le cas, alors vous pouvez faire de nombreuses choses, vous pouvez augmenter la quantité de marge autour de chaque div.inner à environ 30px:

.inner { 
    float: left; 
    background: #181818; 
    margin:5px 30px; 
    width: 200px; 
}

ou diminuer la largeur de div#outer à 630px (texte et suppression -Aligner comme vous n'avez pas vraiment besoin de cela):

#outer { 
    overflow: auto; 
    width: 630px; 
    margin: 0 auto; 
}

J'espère que c'est ce que vous cherchiez!

Source

2010-07-26 09:52:55 Ryano

en augmentant la marge sur mes éléments intérieurs a travaillé plutôt bien .... merci! – espais

Problème CSS - centrage des divs flottants à l'intérieur d'un conteneur

Répondre

Questions connexes