0

我无法使用 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>

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

4

6 回答 6

5

试试这个 死点

于 2009-08-28T14:45:44.627 回答
0

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

绝对

框的位置（可能还有大小）由“顶部”、“右侧”、“底部”和“左侧”属性指定。这些属性指定相对于盒子的包含块的偏移量。绝对定位的盒子从正常流程中取出。这意味着它们对后面的兄弟姐妹的布局没有影响。此外，尽管绝对定位的框有边距，但它们不会与任何其他边距一起折叠。

- 9.3.1 选择定位方案：'position' 属性

绝对：

<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>
于 2009-08-28T14:45:33.833 回答
0

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

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

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

于 2009-08-28T14:47:34.420 回答
0

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

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

于 2009-08-28T14:51:52.013 回答
0

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

希望这对您有所帮助。

于 2009-08-28T15:13:47.607 回答
-2

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

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

于 2009-08-28T14:44:56.907 回答