无法使 CSS 元素居中

发布于 2024-08-03 10:00:47 字数 745 浏览 7 评论 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>

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

原文

I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:

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

Then using

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

But it just wont go to the center. It stays at the left side of the page.

An example of the CSS for the element that I want to be centered is this:

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

So, my HTML would look like this:

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

But as I mentioned before, the element stays put.
Thanks!
Eric

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

已下线请稍等 2024-08-10 10:00:47

尝试用这个
死亡中心

回复收藏 0 原文

(り薆情海 2024-08-10 10:00:47

主要问题是 #topHeader 元素的绝对定位。因为你已经用 top: 0px; 绝对定位了它left: 0px;，这正是它要定位的位置 - 页面的左上角。

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

回复收藏 0 原文

羞稚 2024-08-10 10:00:47

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

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

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

Try adding this to the top of your css file:

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

Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.

回复收藏 0 原文

温柔一刀 2024-08-10 10:00:47

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

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

You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.

absolute
The box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left'
properties. These properties specify
offsets with respect to the box's
containing block. Absolutely
positioned boxes are taken out of the
normal flow. This means they have no
impact on the layout of later
siblings. Also, though absolutely
positioned boxes have margins, they do
not collapse with any other margins.
- 9.3.1 Choosing a positioning scheme: 'position' property

Absolute:

<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>

Relative:

<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>

回复收藏 0 原文