不能居中一個div容器

我想中心我的主容器，但無論我做什麼，它仍然漂浮在左邊... 我把我所有的內容放在自己的Div的原因是我用一個jquery循環背景，我想將我的內容與我的背景分開。但如上所述，我真的不能讓我的Div容器中心... 我希望有人比我更熟練可以弄清楚這一點！不能居中一個div容器

這是我的html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Forside</title> 
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery- 1.6.3.min.js"></script> <script type="text/javascript"    src="jquery.cycle.all.js"></script> 
     <script> 
     $(document).ready(function() { 
      $('#slideshow').cycle({ 
      fx: 'fade', // choose your transition type, ex: fade,  scrollUp, shuffle, etc... 
      pager: '#smallnav', 
      pause: 1, 
      speed: 1800, 
      timeout: 3500 
      });   
      }); 
     </script> 
</head> 
<body> 
    <div class="bx-overlay"> 
    </div> 
    <div id="slideshow"> 
     <img src="images/3.jpg" alt="san diego"/> 
     <img src="images/2.jpg" alt="bridge"/> 
     <img src="images/1.jpg" alt="mountains"/> 
     <img src="images/4.jpg" alt="waves"/> 
     <img src="images/5.jpg" alt="americanflag"/> 
     <img src="images/6.jpg" alt="football"/> 
    </div> 
    <div id="container"> 
     <div id="header"> 
     <img src="images/header.png"> 
     </div> 
    </div> 
</body> 
</html>

，這是我的CSS：

#slideshow, img.bgM { 
min-height: 100%; 
min-width: 1024px; 
width: 100%; 
height: auto; 
position: fixed; 
top: 0; 
left: 0; 
z-index:-9999; 
} 
.bx-overlay { 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0px; 
left: 0px; 
background: transparent url(images/pattern.png) repeat top left; 
z-index:-1;} 
#container{ 
position: absolute; 
text-align:center; 
margin-left: auto; 
margin-right: auto; 

} 
#header { 
display: block; 
margin-left: auto; 
margin-right: auto; 
position: absolute; 
text-align:center; 
margin:0 auto; 
}

來源

2013-09-26 user2820024

你不能使用絕對定位與保證金：汽車，如果你需要的z索引應用，使用相對定位 – Pete

應用文本對齊：中心到div居中div內的內容。如果你想水平居中div本身，你需要設置文本對齊：中心div的父母。 – ZhaoYiLi

以此作爲你的HTML

<div id="container"> 
    <div id="header"> 
    <img src="images/header.png"> 
    </div>

容器將是100％它的父母的寬度爲

要頭球攻門

#header { 
display: block; <-- not required as it's a div 
margin-left: auto; <-- not required as it's a overridden by last margin property 
margin-right: auto; <-- not required as it's a overridden by last margin property 
position: absolute; <-- remove this 
text-align:center; <-- only required if you are centering text 
margin:0 auto; <-- this will center provided you add a width OR max-width 
width: add a value; 
}

來源

2013-09-26 15:27:19

不能居中一個div容器

回答

相關問題