将
居中的正确方法在 xhtml 中？

发布于 2024-10-10 17:13:20 字数 820 浏览 3 评论 0原文

我正在使用 XHTML 1.0 Transitional doctype html 文件，我想要一个宽度为 800px 的主 div 并使其显示居中（不是 div 内容，而是 div 本身）。

我过去使用过这个：

<!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>
        <title></title>
        <style>
            <!--
            html, body { margin:0; padding:0; }

            #main-container { background:black; width:800px; }
            -->
        </style>
    </head>
    <body>
        <center>
            <div id="main-container">
                Content
            </div>
        </center>
    </body>
</html>

但我不确定这是否跨浏览器兼容，或者它是否有效的 xhtml。

原文

Im working with a XHTML 1.0 Transitional doctype html file, and I want to have a main div with 800px width and make it appears centered (not the div content, but the div itself).

I've used this on the past:

<!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>
        <title></title>
        <style>
            <!--
            html, body { margin:0; padding:0; }

            #main-container { background:black; width:800px; }
            -->
        </style>
    </head>
    <body>
        <center>
            <div id="main-container">
                Content
            </div>
        </center>
    </body>
</html>

But I am not sure if this is cross-browser compatible, or if its valid xhtml.

分享到QQ

分享到微博

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

发布评论

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

神经暖 2024-10-17 17:13:20

center 标签自 1998 年起已被弃用。您需要在 div 上应用 CSS margin 0 auto;。这会将顶部和底部边距设置为 0，将左右边距设置为 auto，这将使 div 在其 width 时“自动居中” > 已知/固定。

另请参阅：

在 CSS 中将 div 居中，( text-align 不是答案）

回复收藏 0 原文

人心善变 2024-10-17 17:13:20

删除 center 标签，并设置此 css 声明

#main-container { margin: auto; width:800px }

remove the center tags, and set this css declaration

#main-container { margin: auto; width:800px }

回复收藏 0 原文

萌无敌 2024-10-17 17:13:20

您可以使用

#container{
    position:relative;
    margin: auto;
}

或者，如果您的容器有固定宽度，假设 800px 您可以执行类似的操作

#container{
    position:relative;
    left: -400px;
    margin-left: 50%;
}

You can use

#container{
    position:relative;
    margin: auto;
}

or, if you have a fixed width for your container, lets say 800px you can do something like

#container{
    position:relative;
    left: -400px;
    margin-left: 50%;
}

回复收藏 0 原文

歌入人心 2024-10-17 17:13:20

使用 margin: 0 auto;，如上所述：

<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
#main-container {
  background: black;
  width: 800px;
  margin: 0 auto;
}
</style>

顺便说一句，如果您希望验证为正确的 XHTML，则需要添加 type="text/css"适合您的风格元素。此外，几乎没有必要对旧浏览器隐藏 CSS，因为现在几乎所有浏览器都支持 CSS。

Use margin: 0 auto;, as stated above:

<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
#main-container {
  background: black;
  width: 800px;
  margin: 0 auto;
}
</style>

And by the way, if you wish to validate as proper XHTML, you need to add type="text/css" to your style elements. In addition, there is almost no need to hide your CSS from old browsers, because almost all browsers nowadays supports CSS.

回复收藏 0 原文

~没有更多了~