Wie bringt man den Haupt-Div-Container dazu, sich an der Mitte auszurichten?

Lesezeit: 3 Minuten

Benutzeravatar von Amra
Amra

Ich habe mich immer gefragt, wie andere Leute den Haupt-Div-Container in der Mitte ausrichten können, da die einzige Möglichkeit, die ich bisher schaffe, darin besteht, der CSS-Datei Folgendes hinzuzufügen:

*{
padding:auto;
margin:auto;
text-align:centre;
}

Ich habe andere Seiten gesehen, die Folgendes verwenden: *{padding:0px;margin:0px} aber ich kann nicht sehen, wo oder was sie tun, um den Hauptcontainer zu zentralisieren.

Könnte jemand erklären, wie?

Codebeispiel:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>

Könnte jemand erklären, wie sie es auf der folgenden Seite tun?

http://www.csszengarden.com/?cssfile=/179/179.css&page=4

  • Sie können Ihren Inhalt auch mit

    umschließen, aber eine bessere Lösung finden Sie weiter unten

    – Ameise

    17. Februar 2010 um 9:33 Uhr

  • Auf der Seite, auf die Sie verlinkt haben, verwenden sie Margin Auto für den Container. Das automatische Auffüllen ist jedoch nicht erforderlich und kann sogar einige Browser verwirren.

    – woher

    17. Februar 2010 um 10:31 Uhr

  • @wheresrhys: Danke, ich kann es im CSS nicht finden.

    – Amra

    17. Februar 2010 um 13:12 Uhr

  • Sie sollten Firebug installieren (wenn Sie Firefox verwenden). Klicken Sie auf die Registerkarte HTML, dann auf das Wrapper-Div und im rechten Bereich werden Ihnen alle Stile angezeigt

    – woher

    17. Februar 2010 um 13:41 Uhr


Benutzeravatar von Tatu Ulmanen
Tatu Ulmanen

Verwenden Sie nicht die * Selektor, da dieser für alle Elemente auf der Seite gilt. Angenommen, Sie haben eine Struktur wie diese:

...
<body>
    <div id="content">
        <b>This is the main container.</b>
    </div>
</body>
</html>

Dann kannst du das zentrieren #content div mit:

#content {
    width: 400px;
    margin: 0 auto;
    background-color: #66ffff;
}

Ich weiß nicht, was Sie woanders gesehen haben, aber das ist der richtige Weg. Das * { margin: 0; padding: 0; } Das Snippet, das Sie gesehen haben, dient zum Zurücksetzen der Standarddefinitionen des Browsers für alle Browser, damit sich Ihre Website in allen Browsern ähnlich verhält. Dies hat nichts mit dem Zentrieren des Hauptcontainers zu tun.

Die meisten Browser wenden auf einige Elemente einen Standardrand und eine Auffüllung an, was normalerweise nicht mit den Implementierungen anderer Browser übereinstimmt. Aus diesem Grund wird es oft als klug angesehen, diese Art des „Zurücksetzens“ zu verwenden. Das von Ihnen vorgestellte Reset-Snippet ist das einfachste Reset-Stylesheet, Sie können hier mehr über das Thema lesen:

  • Ist es nicht empfehlenswert, *{padding:0px;margin:0px;} anzuwenden, um es browserübergreifend kompatibel zu machen?

    – Amra

    17. Februar 2010 um 9:34 Uhr

  • @Cesar Lopes, meiner Meinung nach schon, aber es scheint Leute zu geben, die anders denken. Aber ich würde sagen, mach weiter so.

    – Tatu Ulmanen

    17. Februar 2010 um 9:38 Uhr

Benutzeravatar von Kids Formal
Kinder Formal

Das Grundprinzip beim Zentrieren einer Seite besteht darin, ein Body-CSS und ein Main_Container-CSS zu haben. Es sollte etwa so aussehen:

body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#main_container {
     margin: 0 auto;
     text-align: left;
}

Sie können Text ausrichten: Zentrieren Sie den Körper, um den Container zu zentrieren. Dann text-align: linken Container, um den gesamten Text usw. linksbündig auszurichten.

  • Willkommen bei Stack Overflow =) Bitte nehmen Sie sich einen Moment Zeit, um die Stack Overflow Markdown-Hilfeseite durchzulesen, um eine Anleitung zum Formatieren Ihrer Antworten zu erhalten.

    – David Thomas

    2. Februar 2011 um 20:34 Uhr


Ich würde die weglassen * { text-align:center } -Deklaration, da sie die zentrierte Ausrichtung für alle Elemente festlegt.

Meist mit A Behälter mit fester Breite margin: 0 auto sollte genug sein

1433790cookie-checkWie bringt man den Haupt-Div-Container dazu, sich an der Mitte auszurichten?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy