Question

我练习将没有宽度的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>

centerbox.css

div.centerbox-outer{
    text-align: center;
    margin: 0 auto;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    display: inline-block;
}

不使用IE的页面在这里：[链接已删除]

有人知道吗，我在那里缺少什么？

Answer 1

进行了一些研究，并找到了使用相对位置的合适解决方案。这似乎在常用的浏览器中完美运行。

风格如下：

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%;
}

Answer 2

要使div居中，请使用：

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

在div的css中。另外，我发现对于IE，您可能需要将DocType更改为HTML 4规范。类似的东西：

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

我在我的页面中执行这些操作，并且它们完全以IE浏览器为中心。

Answer 3

div.centerbox-outer宽度为100％，因此将margin: 0 auto;放在上面没有任何意义。如果有的话，您应该将margin: 0 auto;放在div.centerbox-inner上。

水平居中div，可变宽度在IE中不起作用

3 个答案: