我练习了将没有宽度的 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>
中心框.css
div.centerbox-outer{
text-align: center;
margin: 0 auto;
}
div.centerbox-inner{
text-align: justify;
background-color: gray;
display: inline-block;
}
不支持 IE 的页面在这里:[链接已删除]
有人知道我在那里缺少什么吗？
最佳答案
进行了一些研究并找到了使用相对位置的合适解决方案。这似乎在常用浏览器中完美运行。
样式如下:
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%;
}
关于css - 以可变宽度水平居中 div 在 IE 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3206735/