代码之家 › 专栏 › 技术社区 › 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% }

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前