webentwicklung-frage-antwort-db.com.de

Wie zentriere ich den Körper auf einer Seite?

Ich versuche, das body-Element auf meiner HTML-Seite zu zentrieren.

enter image description here

Grundsätzlich setze ich im CSS das body-Element auf display: inline-block; damit es nur so breit ist wie sein Inhalt. Das funktioniert gut. Jedoch, margin: 0px auto; zentriert es nicht auf der Seite.

Weiß jemand, wie man das behebt? Ich möchte, dass das große blaue Quadrat auf der Seite zentriert ist und nicht wie jetzt nach links schwebt.

Hier ist mein CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}
27
Ryan Peschel

Wenden Sie auch Textausrichtung an: center; auf dem HTML-Element wie folgt:

html {
  text-align: center;
}

Ein besserer Ansatz ist es jedoch, ein inneres Container-Div zu haben, das zentralisiert wird und nicht den Körper.

26
Madara Uchiha
    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

Dies funktioniert in den meisten Browsern, einschließlich IE.

30
Freakishly

Sie müssen die Breite des Körpers angeben, damit er auf der Seite zentriert wird.

Oder fügen Sie den gesamten Inhalt in das div ein und zentrieren Sie ihn.

<body>
    <div>
    jhfgdfjh
    </div>
</body>​

div {
    margin: 0px auto;
    width:400px;
}

Für den Fall, dass Sie nicht mehr weiterkommen möchten

9
SRN

Für diejenigen, die do die Breite kennen, könnte man so etwas tun

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

Ich bin auch damit einverstanden, dass text-align: center nicht auf den Körper gesetzt wird, da dies den Rest Ihres Codes durcheinander bringen kann und Sie möglicherweise text-align: left individuell einstellen müssen auf viele Dinge entweder dann oder in der Zukunft.

3
DardanM