Wie Zentrum ein html5-element "Abschnitt"? verticaly

hier ist im Grunde meine html-Struktur der content-Bereich ist der Teil, das will ich mittig zwischen Kopf-und Fußzeile, so dass Sie auf allen Auflösungen, die in der Mitte. Ich habe versucht, mit dem Tisch-Methode, wo du ein div um den Abschnitt mit display:table und legen Sie dann den Inhalt-Abschnitt als display:table-cell; vertical-align:middle; aber es scheint auf die Positionierung der divs/Abschnitte in die Inhalte und Positionen der Abschnitt oben Links auf dem Bildschirm ontop von dem header-element, welches position:absolute;. 

<header>
</header>
<section id="container">
<section id="content">
</section>
</section>
<footer>
</footer>
  • Geben Sie ein Beispiel, warum das kopieren und einfügen ist nicht hilfreich, ich habe eine jsfiddle des Codes. Es ist eine hilfreiche Seite zu beheben. Wenn Sie sich entscheiden, geben Sie uns einen link zu einem jsfiddle Sie erstellen, stellen Sie sicher, noch setzen Sie Ihren code in die Frage.
InformationsquelleAutor Connor Brough | 2012-12-20
  1. 1

    Angenommen, diese:

    div {width: 300px; height: 200px;}

    können Sie hinzufügen:

    div {position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -150px;}

    Es ist gute Praxis, ein "wrap" um alle Elemente innerhalb des body-Tags.

    Lassen Sie mich wissen, wie das funktioniert für Sie.

    InformationsquelleAutor Josh
  2. 0

    Zur ersten Spalte;

    float: left;
position: absolute;
left: 50%;

    für die zweite und so weiter;

    float: left;
position: absolute;
left: 70%;

    Aber dieser Ansatz ist ineffizient, die Sie verwenden möchten, nur float:left; im inneren divs.

    InformationsquelleAutor cagcak
Schreibe einen Kommentar