代码之家 › 专栏 › 技术社区 › Ronnie

使用CSS将整个页面居中

css html

Ronnie · 技术社区 · 16 年前

我试图仅使用CSS将整个页面居中,但事实证明,这比我最初预期的要复杂得多。目前,我的代码可以在IE中运行,但在Firefox中无法运行,这带来了变化。页面可以看到 here 。以下是所涉及的代码部分:

#wrap {
    width: 960px;
    margin: 0 auto;
    padding: 6px;
    background: #FFFFFF;
}

我的HTML结构是:

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

似乎在Firefox中,wrap div后面的所有内容都是在它之外创建的。如果我在wrap div中添加一个“float:left”,这个问题就解决了,但很明显,所有内容都会向左浮动而不是居中。

任何帮助都将不胜感激。

3 回复 | 直到 8 年前

John Sheehan 16 年前

将标记更改为

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

编辑:看看链接,你已经做到了。您需要添加overflow:auto;在wrap div的结束标记之前的末尾添加一个clearing div。

此外,在示例页面上,wrap div缺少结束标记。

Joel Coehoorn 16 年前

使用此CSS:

body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}

然后,让我们从你的问题中检查一下这个陈述:

wrap div之后的所有内容都是在它之外创建的

事情就是这样运作的。 不要把任何东西放在你的包装箱外面。 把它想象成一个替代体。

codeinthehole 16 年前

如果你知道页面的宽度,并且它是固定的,你可以使用以下方法。

现在,利用利润率可能为负的事实。..

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前