Question

我一直在寻找解决方案，并尝试实现经常建议的内容，但我无法将div水平居中于另一个div中。

使用我的CMS，我想在页面底部显示最多四个信息块。所以，我试图将两个容器div中的零和四个div放在一起。四个div的宽度为可用宽度的19％，33％或49％，具体取决于页面上显示的div数量。内容器应该在外容器内水平居中。因此，最多四个div的组当然应该在水平中心结束。由于内部容器的宽度与主要内容相同，加上其上方的两列（中心），因此它应垂直显示。外部容器采用整页宽度并具有背景图像。

我的代码现在如下：

<!-- 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>

在我的样式表中，我有这个：

#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; }

放置所有这些的表格和主体如下所示，跳过超出直接分层线的所有内容：

<body><div id="wrapper_main"><center><table border="0" cellpadding="0" cellspacing="0" width="<?php echo $this->params->get('width'); ?>" id="main_table"><tbody>

身体和桌子的css如下。使用Firebug我在那里找不到任何能够在关闭时产生影响的东西。

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%;}

我的开发网站jldev d o t joomlaloft.com上提供了实际页面。

正如你所看到的，我给内部容器一个固定的宽度以及左右边距自动，这通常被建议作为水平居中div的方法。但是，带有div的内部容器最终会左对齐。

这可以使用吗？或者，我应该尝试替代方案，例如在最左边和最右边的信息块div上左右放置一个可变边距？

我已经看到stackoverflow上有很多非常好的答案所以我希望有人能够告诉我哪里出错了。因为它是我没有灵感...非常感谢您提供的任何帮助！

PS顺便说一下，这一定是我见过的最直观，最实用的论坛之一！

Answer 1

我不确定你为什么使用宽度：1420px for。请关注this或this网站，了解css中的正确布局教程。另一种选择是使用css grid。

我个人建议，把桌子拿出来并切换到流畅的网格，这将最适合您的网站。它有一点学习曲线，但相信我，你会永远幸福。您的网站上有很多工作要做;虽然CSS可以改善。如果您需要立即帮助，CSS freenode通常会给出好的建议和批评。

另一方面，不建议在同一标签中使用宽度和边距

Answer 2

内部居中的div不能比包含div的宽。在我的浏览器中，您的网站宽度为1200像素，＃user1234为1420像素;

将＃user1234设置为width：90％;每个用户div宽度：25％;当有4个div。溢出：隐藏;在＃user1234上清除浮动。

＃user1234 div看起来并不居中，因为＃user4 div文本没有填充可用空间。放背景色：#c00;在＃user1234上查看它的边界位置。（注意：你必须有溢出：否则隐藏＃user1234没有高度，你将看不到背景颜色。）

Re：之前的评论 - 在同一个标签上使用宽度和边距没有问题。

Answer 3

当我想让DIV居中时，我所做的就是相对地定位它。将左边设置为50％，边距左边设置为div的宽度的1/2，将div完美地置于容器中心。我过去曾经使用过它，据我所知，它适用于大多数浏览器（IE6 +和非IE浏览器）。虽然可能有更好的方法来做到这一点。

#user1234 { position: relative; 
            left: 50%;
            margin-left: -710px;
            width:1420px;}

居中的divs不能正常工作

3 个答案: