CSS 不居中容器答案

【问题标题】：CSS Not Centering ContainerCSS 不居中容器
【发布时间】：2010-05-09 04:41:49
【问题描述】：

我有一个容器 div。宽度：80%，左边距：10%，右边距 10%。问题是，容器在我检查的所有浏览器中都显示在左侧。如果我将 margin-left 的值更改为 20%，它看起来没问题。

如有必要，我会提供代码，但这里有什么明显的错误吗？每边边距为 10 的 80 对 div 居中不正确吗？

【问题讨论】：

标签： css

【解决方案1】：

我试过你的设置，效果很好。

您应该检查 CSS 的拼写和语法，可能有一些错误导致它无法正常工作。在 Firefox 中，您可以打开错误控制台并重新加载页面，它会告诉您任何 CSS 错误。

您也可以使用margin-left: auto; margin-right: auto; 使元素居中。

这是我用来测试 CSS 的页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<style type="text/css">
div { width: 80%; margin-left: 10%; margin-right: 10%; background: #ccc; }
</style>
</head>
<body>
<div>asdf</div>
</body>
</html>

【讨论】：

【解决方案2】：

div 的父元素有指定的witdh 吗？

试试

width: 100%;

对于父元素

【讨论】：

我将 body（div 的父级）的宽度设置为 100%，但它仍然没有任何变化。

【解决方案3】：

尝试设置这些：

<html>
<head>
    <style>
        .container {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 80%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        Testing page
    </div>
</body>
</html>

【讨论】：

这也不能解决问题。这与将左右边距设置为 10% 的结果相同。
谢谢。这实际上是一个 HTML 问题。我添加了一个不需要的额外 div。问题已解决。