2012-10-21 2 views
3

Je me demandais comment je peux centrer ce http://prntscr.com/hv2q7 Il est suspendu et je veux qu'il soit centré comme ceci http://prntscr.com/hv2ue de sorte que la partie grise arrive dans la frontière. Voici le code html et css pour elle: Le css:Comment puis-je centrer un div

#banner{ 
height:  279px; 
width:  998px; 
margin-right: 0px; 
margin-left: 0px; 
background-image: 
    url(/template/default/images/layout/background/newlayout/test.png); 
} 

Le html:

<div id="banner" ></div> 
+0

CSS protip: Mettez vos propriétés sur des lignes différentes. C'est beaucoup plus facile à gérer et beaucoup plus lisible de cette façon. –

+1

@WaleedKhan Modifié pour l'utilisateur1592665 – dlamblin

+1

Si 'margin: 0 auto' ne fonctionne pas, afficher le style calculé de' # banner'? – Starx

Répondre

2

Vous souhaitez définir vos marges gauche et droite pour auto, non 0px.

Essayez ceci, il est le raccourci pour le réglage de votre haut/marge inférieure à 0 et gauche/droite pour auto:

#banner { 
    margin:0 auto; 
} 
+0

C'est toujours pareil. – Malik

2

Centrer avec css tourne normalement autour de l'utilisation de margin:auto;
Dans ce cas, Regardez les marges gauche et droite étant auto, donc quelque chose comme margin:0 auto; Comme vous l'essayez spécialement pour votre page complète, vous devrez peut-être régler l'affichage des éléments pour bloquer ou le flotteur ou même une position, selon le navigateur . Bien que ceux-ci ne sont généralement pas nécessaires.

En outre, si le div contient vraiment que l'image d'arrière-plan, vous pouvez définir le background-repeat-none et le background-position-center. Cela ne ferait que centrer dans la div, donc si la div est réellement la largeur et la hauteur de l'image, cela ne changerait rien, mais si la div remplit la largeur de son bloc contenant, alors vous auriez à gauche et centrage à droite.

+0

C'est toujours le même – Malik

+1

@ user1592665 Je ne me souviens pas du précédent exact, mais je pense par exemple qu'un 'div' n'acceptera pas une largeur rendant les marges automatiques moins significatives à moins que ce' div' soit flottant ... ou peut-être positionné, j'oublie lequel. – dlamblin

+0

Il est centré maintenant mais coupé. http://prntscr.com/hv422 – Malik

0

mettre ce ARROUND votre code de la bannière:

<div align="center"> "your banner code" </div> 
+1

L'utilisation des attributs alignés en ligne est incroyablement datée et complètement déconseillée. – meagar

+1

Découragé mais généralement soutenu. – dlamblin

+0

@meagar votre réponse est inutile, car il fonctionne réellement - et il a juste demandé une méthode de travail, alors s'il vous plaît soyez gentil avec les autres wo utiliser ces méthodes, merci – Maurice