无法使 CSS 元素居中答案

【问题标题】：Cannot get CSS Elements centered无法使 CSS 元素居中
【发布时间】：2009-08-28 14:42:52
【问题描述】：

我无法使用 CSS 让我的网站以我的生活为中心。我已经尝试了网络上建议的所有常用方法，包括：

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

然后使用

<div id="container>
<!-- Centered Content Goes here-->
</div>

但它只是不会去中心。它停留在页面的左侧。

我想要居中的元素的 CSS 示例如下：

#topHeader
{
    background:url(images/top_header.jpg);
    position:absolute;
    width: 695px;
    height: 242px;
    top: 0px;
    left: 0px;
}

所以，我的 HTML 应该是这样的：

<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>

但正如我之前提到的，元素保持不变。谢谢！埃里克

【问题讨论】：

标签： css elements

【解决方案1】：

试试这个 dead centre

【讨论】：

很棒的例子。将其添加到我的 CSS 技术备忘清单中。

【解决方案2】：

主要问题是#topHeader 元素的绝对定位。因为您已将其绝对定位为 top: 0px; left: 0px;，所以这正是它要定位的位置 - 在页面的左上角。

首先从 #topHeader 元素中删除绝对定位。

【讨论】：

【解决方案3】：

尝试将其添加到 css 文件的顶部：

// Wipes out any preexisting padding and margin.
html, body {
    padding: 0;
    margin: 0;
}

然后添加一个位置：relative;指向你想要居中的类。实际上，尝试将它添加到 html，body 之一，以便您的所有类都使用相对位置。可能是你有 position: absolute; set 然后与左边结合：0px;强制您的标题包含忽略边距：0 auto;并停留在页面的左侧。

【讨论】：

【解决方案4】：

您将标题绝对放置，因此它从包含块（即主体）而不是父元素偏移。你想要的是相对定位。

绝对

盒子的位置（可能还有大小）用'top'指定， “右”、“下”和“左” 特性。这些属性指定相对于盒子的偏移量包含块。绝对地定位框被取出正常流动。这意味着他们没有影响后期布局兄弟姐妹。此外，虽然绝对定位的盒子有边距，他们有不与任何其他边距折叠。

- 9.3.1 Choosing a positioning scheme: 'position' property

绝对：

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:absolute;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>

亲戚：

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:relative;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>

【讨论】：

【解决方案5】：

在尝试所有这些居中方法时要检查的一件事是确保您的文档类型对于正在使用的方法是正确的。

希望这对你有帮助。

【讨论】：

【解决方案6】：

据我所知，它根本行不通。 text-align 居中文本或内联内容，而不是块元素。

编辑：另一方面，The Disintegrator 的链接是有道理的。不幸的是，仅适用于固定大小的块。

【讨论】：

Crimson，如果不提前知道块元素的宽度，就无法居中。