水平居中一个可变宽度不工作在IE浏览器

我练习中心一个div没有宽度，并找到了一种解决方案，适用于所有常见的浏览器。但是当我把这个解决方案变成真正的页面风格时，它不会在IE中工作。水平居中一个可变宽度不工作在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处理的页是这里：[链接删除]

有人有任何想法，我在那里失踪？

来源

2010-07-08 kaupov

哪个版本的IE在工作？而哪个不是？ IE6不起作用，IE7也不起作用。在这两种情况下，灰色框（在示例中）都是视口的整个宽度。 – 2010-07-08 18:48:06

我试过用IE8，还没有尝试过，但你给了我一个很好的提示。我为页面使用，这就是它不同的原因。但我如何解决这个问题在IE7中使用CSS？ – kaupov 2010-07-08 19:14:47

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

风格将以下内容：

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

来源

2010-07-08 19:57:23 kaupov

这似乎并没有在FF 10.0.2（linux）中工作虽然在chrome中工作 – Doug 2012-02-25 19:38:05

要居中的div，使用方法：

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

在CSS的股利。另外，我发现对于IE来说，您可能需要将DocType更改为HTML 4规范。像这样：

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

我在我的页面中做这些，他们完全在IE中心。

来源

2010-07-08 18:41:41 GrandmasterB

div.centerbox-outer是100％宽度，所以margin: 0 auto;没有任何意义。如果有的话，你应该把margin: 0 auto;放在div.centerbox-inner上。

来源

2010-07-08 18:44:17 jeroen

好的，做了更改，但仍然没有运气 – kaupov 2010-07-08 18:59:29

水平居中一个可变宽度不工作在IE浏览器

回答

相关问题