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

使用CSS对齐一个DIV

css html

Elie · 技术社区 · 15 年前

我在我的CSS文件中定义了以下内容:

body  {
    text-align: center;
    float: right;
    position: fixed;
}
.twoColFixRtHdr #container {
    width: 780px;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
}

我的HTML定义如下:

<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">

问题是,在IE(我能检查的所有版本)中,页面的内容是居中的,但在Firefox中,它是左对齐的。我知道文本对齐:center将使元素的内容居中,而不是元素本身,因此必须嵌套内容,这就是额外的DIV的作用。但是,我一定遗漏了IE和火狐在如何呈现这个标签方面的区别。

有什么想法吗?您可以查看站点: http://www.solar-fit.ca

5 回复 | 直到 15 年前

Moak 15 年前

这两个造成了问题

身体& 浮动:正确; 位置:固定;

把那些拿走

JohnFx 15 年前

你试过了吗?

#container{
  width: 780px ;
  margin-left: auto ;
  margin-right: auto ;
}

这种方法不需要嵌套的DIV。根据 source …

“以上代码已经过测试 IE 6、7、Firefox、Opera和Safari。”

Joy Dutta 15 年前

放球怎么样 margin: 0px auto; 体内?

Justin Grant 15 年前

不确定原因,但解决方法是通过doctype将ie置于标准模式,例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    body  {
        text-align: center;
        float: right;
        position: fixed;
    }
    .twoColFixRtHdr #container {
        width: 780px;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left;
    }
</style>
</head>
<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">
    Some text goes here
    </div>
  </div>
</body>
</html>

Andrew Mullins 15 年前

从body规则中删除float和position属性,并添加100%宽度。

body { text-align: center; width: 100% }

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前