comment centrer une page Web en CSS

je suis je suis nouveau en CSS .. j'ai converti mon fichier psd en html/css .. maintenant je veux déplacer ma page web au centre de la fenêtre .. j'ai essayé du code et aligner code seul texte l'image d'arrière-plan "back.gif" reste à gauche .. voici mon code html et CSS »comment centrer une page Web en CSS

**HTML** 

<body> 
<div id="main"> 

     <div id="header"> 
    <div id="logo"> 
      <img src="logo.gif" /> 
     </div> 
     </div> 

    <div id="menu"> 
    <img src="images/menu_07.gif" /> 
      <div id="m"> 
      <ul> 
       <li> <a href="index.php">Home</a></li> 
       <li> <a href="pages.php">Pages</a></li> 
       <li> <a href="donor.php">Donor</a></li> 
       <li><a href="seeker.php">Seeker</a></li> 
       <li><a href="hospitals.php">Hospitals</a></li> 
       <li><a href="lifesaving.php">Life Saving Contacts</a></li> 
       <li><a href="contactus.php">Feedback</a></li> 
      </ul> 
      </div> 
    </div> 

    <div id="content"> 
    <div id="center" align="center"> 
      <h3>WELCOME TO ADMIN AREA</h3> 
      <p id="ajk">AJKBLOODBANK.COM</p> 
     <?php 
       echo "welcome!".$_SESSION['username']; 
       echo "<br>"; 
       echo "<a href=logout.php>Logout</a>&nbsp;"; 
      ?> 
     </div> 
    </div> 

    <div id="footer"> 
    </div> 
</div> 
</body> 


**CSS** 
body 
{ 

    background:url(../back.gif) repeat-y; 
    padding-left:105px; 
    height:900px; 
    text-align: center; 
    margin:auto; 
    min-width: 760px; 
} 
div#main 
{ 
    width: 720px; 
    margin: 0 auto; 
    text-align: left; 
} 

#header 
{ 
    width:787px; 
    margin-top:10px; 
} 

#menu 
{ 

    width:787px;  
    float:left; 
    margin-top:20px; 

} 

#content 
{ 
    background-color:#FFF; 
    border:groove; 
    width:790px; 
    float:left; 
    padding-top:30px; 
    margin-top:30px; 
} 
#footer 
{ 
     float:left; 
     height:52px; 
     width:790px; 
}

S'il vous plaît me dire où je l'ai fait erreur ..

the diameseion of background image "backgif" = 995x1000

Source

2012-04-13 maham

Quel que soit l'élément que vous voulez centrer: définissez une largeur explicite, puis définissez les marges gauche/droite sur auto

#main { width:995px; margin:0 auto; }

... ceci centrera l'élément dans son parent. Si vous étiez au centre #main, il serait centré sur la page (en supposant que votre body a une largeur de 100%)

EDIT

Essayez de faire appliquer votre image de fond à #main au lieu de body. Ou, centrer l'image d'arrière-plan à l'aide background-position, ou un raccourci:

body { background:url(../back.gif) repeat-y center top; }

Vive

Source

2012-04-13 21:41:09 Madbreaks

je mets ce code ,, – maham

'body { \t arrière-plan: url (../ back.gif) haut du centre de répétition; \t} #main { \t arrière-plan: url (../ back.gif) repeat-y; \t largeur: 995px; \t marge: 0 auto; \t} 'cela a déplacé l'image d'arrière-plan au centre .. mais la div principale est à gauche .. @Madbreaks – maham

Prenez une grande respiration. Pourquoi mettre l'image d'arrière-plan dans les deux éléments? Mettez-le dans l'élément du corps. Si '# main' est toujours à gauche, essayez d'ajouter' height: 100%; largeur: 100%; 'à votre corps' css. – Madbreaks

Pour centrer l'élément du corps, j'utiliser quelque chose de similaire à ceci:

.body { 
    width: 940px; 
    margin-left: auto; 
    margin-right: auto; 
}

Source

2012-04-13 21:41:22

En utilisant sténographie, 'marge: 0 auto;' 0 pour le haut et le bas, automatique pour gauche et droite. – Whymarrh

@Whymarrh: Je ne suis pas sûr d'avoir compris votre point. Oui, il y a d'autres façons de l'écrire. Cependant, votre raccourci nécessite que je sache/définir la marge supérieure aussi bien. Je ne faisais aucune hypothèse sur la marge supérieure. –

@Jonathan .. je viens de vérifier votre code .. mon image de fond est toujours aussi gauche – maham

comment centrer une page Web en CSS

Répondre

Questions connexes