以水平方向居中一个div，宽度不能在IE中工作 [英] Centering a div horizontally with variable width not working in IE
问题描述
我练习以一个没有宽度的div为中心，并找到一个在每个常见浏览器中都有效的解决方案。但是当我把这个解决方案变成真正的页面样式，它不会在IE中工作。
I practiced to center a div without a width and found a solution that works in every common browser. But when I put this solution into real page style, it wont work in IE.
这个练习解决方案在IE，Chrome和Firefox中工作得很好，
The practice solution, that works perfectly in IE, Chrome and Firefox, looks like this:
<!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
centerbox.css
div.centerbox-outer{
text-align: center;
margin: 0 auto;
}
div.centerbox-inner{
text-align: justify;
background-color: gray;
display: inline-block;
}
不能使用IE的页面在这里：[link removed]
The page where it is not working with IE is here: [link removed]
有人有什么想法，我错过了什么？
Do someone have any idea, what I'm missing there?
推荐答案
进行了一些研究，并找到了使用相对位置的合适解决方案。
Made some research and found a suitable solution using relative positions. This seem to work perfectly in commonly used browsers.
样式如下：
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%;
}
这篇关于以水平方向居中一个div，宽度不能在IE中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
