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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

centerbox.css

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

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

Run Code Online (Sandbox Code Playgroud)

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

有人有任何想法,我在那里缺少什么？

Answer 1

kau*_*pov 9

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

风格如下:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，4 月前
查看次数：	7055 次
最近记录：	14 年，1 月前