無法在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

回答

相關問題