居中嵌套的div

时间:2011-06-10 19:58:06

标签: css html centering

我再一次以问题为中心......

http://www.srcf.ucam.org/~sas98/project.php

我如何将所有内容集中在#main?

4 个答案:

答案 0 :(得分:3)

尝试:margin: 0 auto; display: table
没有宽度,没有。在Chrome中测试过。

答案 1 :(得分:2)

  1. 为您的HTML使用doctype -

    &lt;!DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Strict // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt; < / p>

    &lt; html xmlns =“http://www.w3.org/1999/xhtml”xml:lang =“en”lang =“en”&gt;

  2. 第二 - 添加到主类:

    margin: 0 auto;

  3. 编辑: 并以像素为主要宽度

答案 2 :(得分:1)

首先,确保您拥有正确的doctype。

使用margin: 0 auto;进行居中的关键是确保相同的div具有静态宽度。

 #main { width: 980px; margin: 0 auto; }

答案 3 :(得分:0)

要居中<div class="main">(而 class - 这意味着它是.main,而不是#main - 您的HTML和CSS不会在这一点上彼此同意):

  • margin: 0 auto; width: 1020px添加到.main1020px是在这里使用的正确号码。
  • 您还需要从width: 100%移除body,否则您的居中位置将无法准确无误。
  • 您还应该从overflow: hidden删除body,或在您的网页上无法滚动。

最后,添加适当的doctype作为第一行,或者您的页面位于Quirks Mode,尤其是Internet Explorer会出现大问题:

<!DOCTYPE html>

我不确定你的页脚应该做什么。