Wie würde ich richten Sie ein <div> der container in der Mitte einer Webseite?

Ich bin der Gestaltung einer website und dies ist das Letzte Stück, das ich brauche, bevor ich es hochladen.
Ich habe gesucht, diese Website und viele andere, aber ich habe ehrlich gesagt nicht die richtige Lösung finden. Ich werde so spezifisch wie ich kann.

www.solarfields.com
Dies ist so gut ein Beispiel, wie jede andere. Ich soll ausrichten, meine Inhalte wie seiner, in der Mitte der Webseite. Er verwendet Flash, jedoch, und das möchte ich mir behalten zu HTML und CSS.
Ich umfasste der gesamte Körper der meine Website-Website in einer tag-mit diesen Attributen:

#body {
    position:absolute;
    top:13%;
    left:25%;
    width:350px;
}

Es ist zentriert auf meinem monitor (1600x900), aber ich möchte es zentriert erscheinen auf allen Auflösungen.

Größe: 525px (h) x 350px (w).

Ich mehr als eine <div>.

Ich interessiere mich nicht über browser-Kompatibilität.

Ich will nicht sichtbaren Grenzen.

Gibt es eine Tabelle 801px breit. Es hat zwei <td>'s, 29px und 762px breit.

Ich bin ein CSS-noob, also ich bin damit nur zufällige Informationen. Wenn Sie etwas anderes benötigen, zögern Sie nicht mir eine e-mail @ [email protected].

Dank so viel.

  • Haben Sie versucht: body { margin: 0 auto; }? Versuchen Sie hier: stackoverflow.com/questions/963636/...
  • body { margin: 0 auto; } einfach klebt es in eine Ecke. ich versuche die links aus.
  • oh! der 2. link, arbeitete für die Ausrichtung der äußeren <div> (danke!!!), aber nicht verschachtelt. ich bin arbeiten...
InformationsquelleAutor Matthew Jack | 2011-03-13
  1. 1

    Horizontal und vertikal zentriert:

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
                body div {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                }
                body div div {
                    position: relative;  
                    top: -262px;
                    height: 525px;                 
                    width: 350px;
                    margin: 0 auto 0;
                    background: #000;
                }
        </style>
    </head>
    <body>
        <div><div>Testing</div></div>
    </body>
</html>
    • danke, das ist ein guter start. aber das nur stellt, ist es in der oberen linken Ecke. ich löschte mein #Körper-code und fügte Ihnen.
    • boah O_O das macht nichts, es verstreut Dinge ganz über dem Platz
    • Ich verwendet Körper nicht #Körper, so ersetzen Sie diese, und stellen Sie sicher, Ihr Körper hat zwei divs in ihm. Ob Sie es glauben oder nicht, das funktioniert und es wird zentriert zu sein, Versprechen.
    InformationsquelleAutor jsonnull
  2. 1

    Wenn Sie margin: 0 auto; auf ein div, die auch eine Breite festgelegt ist, wird es Mitte innerhalb des übergeordneten Containers.

    Um genauer zu sein, nehmen Sie die folgende css:

    div#body {
    width:902px;  //Or whatever your content width is
    margin:0 auto;
    padding:0;
}

    und wenden diese Klasse auf die äußeren div-Element in Ihre Website:

    <html>
    <body>
        <div id"body">
            ...The rest of your content...
        </div>
    </body>
</html>

    Was dies bedeutet ist stellen Sie die oberen und unteren Ränder des #body auf 0, und die linken und rechten Ränder für die automatische Verteilung der leere Raum zwischen Ihnen ist; die Zentren, die div auf der Seite. Dies gilt Links - /rechts-center.

    InformationsquelleAutor Infotekka
  3. 0

    Lösung: http://jsfiddle.net/magicaj/Xd7sK/5/

    Zentrierung horizontal ist einfach, Sie brauchen nur zu setzen margin:0 auto; auf das element, das Sie wollen zentriert. Jedoch immer ein element vertikal zentrieren, ist viel schwieriger. Es gibt CSS-only Lösungen gibt, die imitieren, was Tabellen können bereits mit vertical-align:middle; CSS. Ich immer bestrebt, verwenden Sie Tabellen nur für tabellarische Daten, aber in diesem Fall finde ich die Tabellen für layouts ist akzeptabel:

    HTML: 

    <table class="wrapper">
    <tr>
        <td>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in  lobortis ante. Phasellus rhoncus, magna adipiscing consequat viverra,  nibh lectus eleifend neque, eget fermentum massa mauris id felis. Morbi  aliquet fermentum quam ut sollicitudin.
            </div>
        </td>
    </tr>
</table>

    CSS:

    html, body, .wrapper {
    height:100%;   
}

.wrapper {
    margin: 0 auto; /* center horizontally */
}

.wrapper td {
    height:100%;
    vertical-alignment: middle; /* center vertically */   
}

.content {
    width: 350px;
    background:#ccc;
}
    InformationsquelleAutor Adam Ayres
Schreibe einen Kommentar