So zentrieren Sie eine Webseite in CSS

Ich bin ich bin neu in CSS .. Ich habe meine PSD-Datei in HTML/CSS umgewandelt .. jetzt möchte ich meine Webseite in die Mitte des Fensters verschieben .. Ich habe etwas Code versucht und dass Code ausrichten von Text nur das Hintergrundbild "back.gif" auf der linken Seite bleibt .. hier ist mein hTML und CSS-Code“So zentrieren Sie eine Webseite in 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; 
}

Bitte sagen Sie mir, wo ich Fehler gemacht ..

the diameseion of background image "backgif" = 995x1000

Quelle

2012-04-13 maham

Welches Element auch immer zentriert sein soll - legen Sie eine explizite Breite fest und stellen Sie dann die linken/rechten Ränder auf auto

ein

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

... wird das Element in seinem übergeordneten Element zentriert. Wenn Sie #main zum Zentrum, wäre es auf der Seite zentriert werden (vorausgesetzt, Ihr body hat 100% Breite)

EDIT

Versuchen Sie Ihr Hintergrundbild zu #main statt body gelten zu machen. Oder Zentrieren Sie das Hintergrundbild mit background-position oder eine Abkürzung:

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

Prost

Quelle

2012-04-13 21:41:09 Madbreaks

ich diesen Code zu setzen ,, – maham

'Körper { \t Hintergrund: URL (../ back.gif) wiederholen-y oben Mitte; \t} #main { \t Hintergrund: URL (../ back.gif) repeat-y; \t Breite: 995px; \t Rand: 0 automatisch; \t} 'Dies bewegte das Hintergrundbild in die Mitte .. aber das Haupt Div ist auf der linken Seite .. @Madbreaks – maham

Holen Sie einen tiefen Atemzug. Warum sollte das Hintergrundbild in beide Elemente eingefügt werden? Setzen Sie es in das Körperelement. Wenn '# main' immer noch auf der linken Seite ist, versuchen Sie' height: 100%; Breite: 100%; 'zu deinem' Körper' css. – Madbreaks

Sie das Körperelement zu zentrieren, würde ich etwas Ähnliches wie diese verwenden:

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

Quelle

2012-04-13 21:41:22

Mit shorthand, 'margin: 0 auto;' 0 für oben und unten, auto für links und rechts. – Whymarrh

@Whymarrh: Nicht sicher, ich verstehe Ihren Standpunkt. Ja, es gibt andere Möglichkeiten, es zu schreiben. Allerdings erfordert Ihre Verknüpfung, dass ich auch den oberen Rand kenne/setze. Ich machte keine Annahmen über den oberen Rand. –

@ Jonathan .. Ich habe nur Ihren Code überprüft .. mein Hintergrundbild ist immer noch so links – maham

So zentrieren Sie eine Webseite in CSS

Antwort

Verwandte Themen