无法在IE中获得水平居中的绝对div

我正在尝试构建一个固定的左侧边栏为220px的网站，并在屏幕的其余部分填充固定页面。我试图用图像填充页面部分，并在顶部显示信息。该代码在Chrome和Firefox中运行良好，但无法在IE中运行。无法在IE中获得水平居中的绝对div

任何人都可以提供任何建议更好的选择我会想象不使用绝对的div？

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
</head> 
    <body> 
    <div id="wrap"> 
    <div id="sidebar"> 
     <div class="logo"> 
     <a id="logo"> <img src="LOGO.png"/></a> 
     </div> 
    <ul class="navigation red" id="red"> 
     <li><a href="#" class="active">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Gallery</a></li> 
     <li><a href="#">Shop</a></li> 
    </ul> 
    </div> 

    <div id="page" style="padding:0 !important;"> 
    <img src="images/back.jpg" class="back" alt=""/> 

    <div id="center"> 
     <div class="header"> 
     <center> <h3 class="page_title">Website Title</h3></center> 
     </div> 
     <!-- services --> 
     <div class="section group"> 
      <div class="one_half first"> 
      <div class="column_content"> 
       <h4> Title</h4> 
       <img src="images/2.png"/> 
       <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p> 
      </div> 
     </div> 

<div class="one_half first"> 
      <div class="column_content"> 
       <h4> Title</h4> 
       <img src="images/2.png"/> 
       <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p> 
      </div> 
     </div> 

     <div class="one_half first"> 
      <div class="column_content"> 
       <h4> Title</h4> 
       <img src="images/2.png"/> 
       <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p> 
      </div> 
     </div> 
    <div class="one_half first"> 
      <div class="column_content"> 
       <h4> Title</h4> 
       <img src="images/2.png"/> 
       <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p> 
      </div> 
     </div> 

     </div> 
</div> 
</div> 
</div> 
</body> 
</html>

CSS

body { 
    background:#FFF; 
    font-size:14px; 
    height:100%; 
    width: 100%; 
} 
div#wrap { 
    width:100%; 
    max-width:100%; 
    overflow:hidden; 
    margin:0 auto!important 
} 
div#sidebar { 
    width:220px; 
    height:100%; 
    float:left; 
    background: #FFF; 
    border-right:1px solid #2e2f2f; 
    position:fixed 
} 
div#page { 
    height:100%; 
    left:220px; 
    right:0px; 
    background: #FFF; 
    position:absolute; 
    padding:2% 5%; 
} 
div#center{ 
    margin:0 auto !important; 
    width:100%; 
    height:auto; 
    z-index:1000; 
    background:rgba(255,255,255,0.5); 
} 
.group { 
    padding: 0 20px 0 20px !important; 
    position:absolute; 
    z-index:10; 
    bottom: 20px !important; 
    left:0; 
    right:0; 
    max-width:850px; 
    margin:0 auto !important; 
    display:inline-table; 
} 
.header { 
    padding:0 20px 0 20px !important; 
    position:absolute; 
    z-index:10; 
    top: 8% !important; 
    left:0; 
    right:0; 
    max-width:850px; 
    margin-left:auto !important; 
    margin-right:auto !important; 
} 
img.back{ 
    min-height:100%; 
    min-width:1024px; 
    width:100%; 
    height:auto; 
} 
.one_half { 
    font-size: 17px; 
    float:left; 
    width:50%; 
    overflow:hidden; 
}

一直试图让我的头一轮的这一段时间，而不是现在取得任何进展的任何帮助将是非常赞赏。

谢谢！

---编辑---

不要以为我在IE

来源

2013-04-06 user2224516

@Ejay对不起，你这是什么意思？ – user2224516 2013-04-06 13:48:15

我的意思是我假设你的问题在“评论”选项卡中是upvoted的。除了缺少'' – Ejaz 2013-04-06 13:50:18

实际上只是忘了它并接受我的道歉，这个问题没有错。我想我没有想清楚。将在2分钟内删除评论:) – Ejaz 2013-04-06 13:51:36

明确它的组头的div我试图中心，可以不如果不是你想要什么，我需要你更好地解释你的要求。 http://jsfiddle.net/HhddF/

.back { 
    background-color:#3D6AA2; 
    height:100%; 
    width:100%; 
}

来源

2013-04-09 23:37:51 Dawson

无法在IE中获得水平居中的绝对div

回答

相关问题