1

我正在使用 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。

4

4 回答 4

5

该center标签自 1998 年以来已弃用。您需要margin 0 auto;在 div 上应用 CSS。这将设置顶部和底部边距0以及左右边距，当 div已知/固定auto时，它将让 div “自动居中” 。width

也可以看看：

于 2011-01-08T21:45:06.757 回答
1

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

#main-container { margin: auto; width:800px }
于 2011-01-08T21:45:29.573 回答
0

您可以使用

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

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

#container{
    position:relative;
    left: -400px;
    margin-left: 50%;
}
于 2011-01-08T21:48:53.230 回答
0

使用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。

于 2011-03-27T22:18:22.167 回答