【发布时间】：2010-10-27 20:56:56
【问题描述】：
我一直在寻找解决方案，并尝试实施经常被建议的内容，但我无法将一个 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>
body 和 table 的 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 上有很多非常好的答案，所以我希望有人能够告诉我哪里出错了。因为它是我没有灵感......在此先感谢您提供的任何帮助！
顺便说一句，这一定是我见过的最直观、最实用的论坛之一！
【问题讨论】：