J'ai cherché des solutions et essayé de mettre en œuvre ce qui est souvent suggéré, mais je n'arrive pas à centrer horizontalement un div dans un autre div.centrer divs ne fonctionne pas comme il se doit
Avec mon CMS, je souhaite afficher jusqu'à quatre blocs d'informations vers le bas de la page. Donc, j'essaie de mettre entre zéro et quatre divs dans deux div divisés. Les quatre divs ont une largeur de 19%, 33% ou 49% de la largeur disponible en fonction du nombre de div affichés sur une page. Le conteneur interne est censé être centré horizontalement dans le conteneur externe. De ce fait, le groupe de quatre divs devrait bien sûr se retrouver au centre horizontal. Comme le conteneur interne a la même largeur que le contenu principal et deux colonnes au-dessus, qui sont centrées, il doit apparaître verticalement. Le conteneur externe prend la largeur de la page entière et possède une image d'arrière-plan.
Mon code est maintenant comme suit:
<!-- BEGIN USER MODULES -->
<tr>
<td align="left" valign="top">
<?php if ($this->countModules('user1 and user2') || $this->countModules('user1 and user3') || $this->countModules('user1 and user4') || $this->countModules('user2 and user3') || $this->countModules('user2 and user4') || $this->countModules('user3 and user4')) : ?>
<style type="text/css">#user1, #user2, #user3, #user4 { width:49%; }</style>
<?php endif; ?>
<?php if ($this->countModules('user1 and user2 and user3') || $this->countModules('user1 and user2 and user4') || $this->countModules('user1 and user3 and user4') || $this->countModules('user2 and user3 and user4')) : ?>
<style type="text/css">#user1, #user2, #user3, #user4 { width:33%; }</style>
<?php endif; ?>
<?php if ($this->countModules('user1 and user2 and user3 and user4')) : ?>
<style type="text/css">#user1, #user2, #user3, #user4 { width:19%; }</style>
<?php endif; ?>
<?php if ($this->countModules('user1 or user2 or user3 or user4')) : ?><div id="wrap1234"><div id="user1234">
<?php if($this->countModules('user1')) : ?><div id="user1" class="module_bc"><jdoc:include type="modules" name="user1" style="xhtml" /></div><?php endif; ?>
<?php if($this->countModules('user2')) : ?><div id="user2" class="module_bc"><jdoc:include type="modules" name="user2" style="xhtml" /></div><?php endif; ?>
<?php if($this->countModules('user3')) : ?><div id="user3" class="module_bc"><jdoc:include type="modules" name="user3" style="xhtml" /></div><?php endif; ?>
<?php if($this->countModules('user4')) : ?><div id="user4" class="module_bc"><jdoc:include type="modules" name="user4" style="xhtml" /></div><?php endif; ?>
</div><div class="clear"></div></div><?php endif; ?>
</td>
</tr>
Dans mes feuilles de style que j'ai ceci:
#wrap1234 { background:transparent url(images/header_bg.png) no-repeat scroll 0 0; border-bottom:1px solid #444444; border-top:1px solid #444444; margin:25px 0 10px; padding:5px 0; text-align:center; align:center;}
#user1234 { width:1420px; margin-left:auto; margin-right:auto; }
#user1, #user2, #user3, #user4 { float:left; margin:5px 0; padding:5px 0; text-align:left; }
Le tableau et le corps dans lequel est placé tout cela sont les suivantes, sauter tout ce qui sort de la ligne hiérarchique directe:
<body><div id="wrapper_main"><center><table border="0" cellpadding="0" cellspacing="0" width="<?php echo $this->params->get('width'); ?>" id="main_table"><tbody>
Le css du corps et de la table est ci-dessous. En utilisant Firebug je ne trouve rien là-dedans qui fasse la différence lorsqu'il est éteint.
html, body, form, fieldset{margin:0; padding:0;}
body {background:#222222 none repeat scroll 0 0; color:#777777; font-family:Helvetica,Tahoma,sans-serif; font-size:0.72em; height:100%; text-align:center;}
#wrapper_main {background:#FFFFFF url(images/wrapper_main_bg.gif) repeat-x scroll left top; border-bottom:2px solid #CCCCCC; padding-bottom:20px; position:relative; width:100%; z-index:1;}
td, div {font-size:100%;}
La page actuelle est disponible sur mon site de développement à jldev d o t joomlaloft.com.
Comme vous pouvez le voir, j'ai donné au conteneur interne une largeur fixe ainsi qu'une marge automatique de gauche et de droite, comme on le suggère souvent comme le moyen de centrer un div horizontalement. Cependant, le conteneur interne avec les divs finit par être aligné à gauche.
Est-ce que cela peut fonctionner? Ou, devrais-je essayer une alternative, par exemple en mettant une marge variable à gauche et à droite sur les divs de bloc d'information les plus à gauche et les plus à droite?
J'ai vu qu'il y a beaucoup de très bonnes réponses sur stackoverflow donc j'espère que quelqu'un est capable de me dire où je me suis trompé. En l'état, je n'ai plus d'inspiration ... Merci d'avance pour toute aide que vous pouvez apporter!
PS Btw ce doit être l'un des forums les plus intuitifs et pratiques que j'ai jamais vu!
Je vais voter ceci la meilleure réponse parce qu'elle indiquait le vrai problème: la largeur de 1420px était complètement mal calculée. Une fois que la largeur a été réglée à la bonne quantité de 1000px, tout a fonctionné. Merci! Merci aussi à ncallaway pour son alternative qui autrement aurait été la meilleure réponse. –