Css 以可变宽度水平居中div，不适用于IE_Css_Internet Explorer_Html

Css 以可变宽度水平居中div，不适用于IE

css internet-explorer html

Css 以可变宽度水平居中div，不适用于IE,css,internet-explorer,html,Css,Internet Explorer,Html,我练习了将一个div居中而没有宽度，并找到了一个在每个常用浏览器中都能使用的解决方案。但当我把这个解决方案变成真正的页面风格时，它在IE中就不起作用了在IE、Chrome和Firefox中完美运行的实践解决方案如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html&g

我练习了将一个div居中而没有宽度，并找到了一个在每个常用浏览器中都能使用的解决方案。但当我把这个解决方案变成真正的页面风格时，它在IE中就不起作用了

在IE、Chrome和Firefox中完美运行的实践解决方案如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Centerbox</title>
    <link type="text/css" rel="stylesheet" href="centerbox.css" media="all" />
</head>

<body>
    <div class="centerbox-outer">
        <div class="centerbox-inner">
            <p>Sample content that is not fixed width</p>
            <p>Some more content</p>
            <form>
                <input type="text" name="sampleinput" />
                <input type="submit" name="go" />
            </form>
        </div>
    </div>
</body>
</html>

不使用IE的页面位于此处：[链接已删除]

有人知道我遗漏了什么吗？

要使div居中，请使用：

 margin-left: auto; 
 margin-right: auto;

同样，我发现对于IE，您可能需要将DocType更改为HTML4规范。比如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

我在我的页面中这样做，它们在IE中完全居中。

div.centerbox-outer

是100%宽度，因此放置

边距：0自动没有任何意义。如果有的话，你应该把margin:0autodiv.centerbox-internal
上的code>进行了一些研究，并使用相对位置找到了合适的解决方案。这似乎在常用浏览器中工作得很好
风格如下：
div.centerbox-outer{
    margin: 0 auto;
    float: left;
    left: 50%;
    position: relative;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    float: left;
    position: relative;
    right: 50%;
}

哪个版本的IE有效？哪一个不是？IE6不起作用，IE7也不起作用。在这两种情况下，灰色框（在示例中）是视口的全宽。我尝试过IE8，没有尝试过旧的，但您给了我一个很好的提示。我使用的页面，这就是为什么它是不同的。但是我如何在IE7中使用CSS来解决这个问题呢？好的，做了更改，但仍然没有运气。不过，这在FF 10.0.2（linux）中似乎不起作用，在chrome中也可以
div.centerbox-outer{
    margin: 0 auto;
    float: left;
    left: 50%;
    position: relative;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    float: left;
    position: relative;
    right: 50%;
}