CSS - correction div au centre supérieur

Question

Je voudrais centrer un div à l'intérieur de l'en-tête qui est 100% de largeur. La div qui doit être centrée a une largeur et une hauteur physiques. J'ai essayé d'utiliser la position absolue, mais lors du redimensionnement de l'écran, le div restera centré. Je veux que la div reste au centre du design, pas à l'écran. Comment puis-je accomplir cela? Je ne veux pas non plus utiliser la position fixée pour cela.

css:

header{ 
    position: relative; 
    width: 100%; 
    height: 65px; 
    background-color: #662D91; 
} 
#banner{ 
    position: absolute; 
    left: 50%; 
    margin-left: -240px; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
} 

HTML:

<header> 
     <div id="banner"> 
      <a href="/index"> 
       <img src="/_images/layout/PentaOneStop_headerLogo.png" class="img-center" /> 
      </a> 
     </div> 
    </header> 

EDIT: J'ai résolu mon problème en ajoutant un div entre l'en-tête pleine largeur et le logo qui est la largeur de la conception. Il semble avoir résolu mon problème.

jsFiddle de ma solution à mon problème: http://jsfiddle.net/U3Hpa/2/

Answer 1

#banner{ 
    margin-left: auto; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
} 

en définissant manuellement une position de gauche, et les marges, vous faites le navigateur le faire quelle que soit la taille de vos autres divs.

la fonction automatique dans vos marges centre automatially la div par rapport à l'en-tête

Answer 2

La solution simple consiste à faire text-align: center.

#banner{ 
    text-align: center; 
} 

http://jsfiddle.net/U3Hpa/

Answer 3

Essayez ceci:

header{ 
    position: relative; 
    width: 980px; 
    height: 65px; 
    background-color: #662D91; 
} 
#banner{ 
    position: relative; 
    margin: 0 auto; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
} 

Answer 4

Essayez ceci:

#banner{ 
position: fixed; 
left: 50%; 
margin-left: auto; 
margin-right: auto; 
width: 480px; 
height: 115px; 
border-radius: 20px; 
} 

Answer 5

Je résolu mon problème en ajoutant un autre div qui était un enfant de l'élément d'en-tête mais le parent de #banner. Je l'ai ensuite placé à une largeur de 980px (même que la largeur du conteneur de contenu), et le définir à margin: 0 auto;. Cela semblait régler mon problème. Je cherchais une solution CSS sans changer le balisage HTML, mais je ne pouvais pas en trouver un. Merci pour tous les commentaires.

Le Fiddle n'illustre pas la meilleure solution à cause de la petite fenêtre, mais le code est précis.

jsFiddle: http://jsfiddle.net/U3Hpa/2/