在 Google Chrome 中将 div 居中

发布于 2024-11-08 18:11:12 字数 963 浏览 0 评论 0原文

我有以下 CSS：

html, body {
        background-color:black;
        font-family:"arial bold";
        overflow:auto;
        text-align: center; 
    }
div#content {
        width:792px;
        height:100%;
        padding:0px;
    }

div#header  {
        height:216px;
        width:100%;
    }

我的 HTML 代码是：

<html>
    <head>
        <title>
            Think in a NEW BOX.
        </title>

        <link rel="stylesheet" type="text/css" href="styles/default.css" />
    </head>
    <body onload="">
        <div id="content">
            <div id="header">
                <img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" />
            </div>
        </div>
    </body>
</html>

现在，这在 IE 中效果很好。 div 完美居中（标题）。然而，在 Google Chrome 中，div 是左对齐的。我错过了什么吗？

原文

I have the following CSS:

html, body {
        background-color:black;
        font-family:"arial bold";
        overflow:auto;
        text-align: center; 
    }
div#content {
        width:792px;
        height:100%;
        padding:0px;
    }

div#header  {
        height:216px;
        width:100%;
    }

The HTML code I have is:

<html>
    <head>
        <title>
            Think in a NEW BOX.
        </title>

        <link rel="stylesheet" type="text/css" href="styles/default.css" />
    </head>
    <body onload="">
        <div id="content">
            <div id="header">
                <img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" />
            </div>
        </div>
    </body>
</html>

Now, this works great in IE. The div centers perfectly (header). In Google Chrome, however, the div is left aligned. Am I missing something?

分享到QQ

分享到微博

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

发布评论

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

ˇ宁静的妩媚 2024-11-15 18:11:12

我今天也遇到了这个“问题”。使用 display: inline-block; 解决了这个问题。工作浏览器不会改变，如果它已经工作，这不会与旧的 IE 混淆。

回复收藏 0 原文

多谢你的绝情让我学会死心 2024-11-15 18:11:12

您缺少：

文档类型（因此 IE 正在模拟 IE 4/5 天的错误，以应对可怕的古老网页）
div 元素是块元素，因此 text-align 不会影响它
div 上的 auto 左右边距。

有关图表的详细说明，请参阅使用 CSS 居中

回复收藏 0 原文

零度° 2024-11-15 18:11:12

更好的解决方案是将块居中，如下所示：

#content 
{
  margin:0px auto;
}

此方法被...使用，几乎每个人（包括SO）。

Even better solution is to center the block like this:

#content 
{
  margin:0px auto;
}

This method is used by... well, just about everyone (including SO).

回复收藏 0 原文

柠北森屋 2024-11-15 18:11:12

用于

#content {
    margin-left: auto;
    margin-right: auto;
    width: 100px; /* Your width */
}

将 div 居中。它允许您的 div 选择左侧和右侧的可变边距，从而产生居中的 div。这应该适用于所有浏览器。

Use

#content {
    margin-left: auto;
    margin-right: auto;
    width: 100px; /* Your width */
}

to center your div. It allows your div to choose a variable margin for left and right, that results in a centered div. This should work for all browser.

回复收藏 0 原文