Impossible de centrer un conteneur div

J'essaie de centrer mon conteneur principal, mais quoi que je fasse il flotte encore à gauche ... La raison pour laquelle je place tout mon contenu dans une propre division, c'est que j'utilise un fond de cycle Jquery, et je veux séparer mon contenu de mon arrière-plan. Mais comme mentionné, je ne peux vraiment pas faire de mon centre de conteneurs Div ... J'espère que quelqu'un d'un peu plus qualifié que moi peut comprendre cela!Impossible de centrer un conteneur div

Ceci est mon 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>

et ceci est mon 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; 
}

Source

2013-09-26 user2820024

vous ne pouvez pas utiliser le positionnement absolu avec marge: auto, si vous avez besoin z-indexation pour appliquer, utiliser le positionnement relatif – Pete

Application text-align: center au centre la div contenu à l'intérieur de la div. Si vous voulez centrer horizontalement le div lui-même, vous devez définir text-align: center au parent de div. – ZhaoYiLi

Avec ce que votre HTML

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

Le conteneur sera 100% pour la largeur de son parent

Pour centrer l'en-tête

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

Source

2013-09-26 15:27:19

Impossible de centrer un conteneur div

Répondre

Questions connexes