[CSS]vertical-align bei <div> anwenden

Matze · 21.01.2007, 17:16

Guten Tag die Herren!

Mir stellt sich folgendes Problem: Ich möchte eine Div-Box in die Mitte der Seite positionieren. Die horizontale Ausrichtung war kein Problem, jedoch komme ich bei der vertikalen nicht weiter. Zwar habe ich die Funktion "vertical-align" gefunden, jedoch funktioniert diese wohl nicht bei <div>.

Zitat:

Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen.

Quelle

Wie ich die Box nun richtig positioniere, habe ich allerdings noch nicht herausgefunden.

Mein HTML-File:

PHP-Code:

  {doctype}

<html>

<head>

    <title>{title}</title>

    {css=main.css}

</head>

<body>

    <div class="main">

        <div class="container">

  

        </div>

    </div>

</body>

</html>

{css=main.css} wird noch später durch mein Template-Parser ersetzt, ebenso wie {doctype}

Mein CSS-File:

PHP-Code:

  * {

    padding:0px;

    margin:0px;

}

 
.main {

    font-family:Tahoma,Verdana,Arial,sans-serif;

    color:#ffffff;

    font-size:11px;

    background:#000000;

    width:1280px;

    height:1024px;

    text-align:center;

}

 
.container {

    border:1px solid #ffffff;

    width:950px;

    height:500px;

    margin:auto;

    text-align:left;

}

Nebenbei würde ich auch gerne die Höhenangabe bei div.main durch 100% ersetzen. Dann gibt es allerdings ein Problem mit der Ausgabe (obere Hälfte schwarz, untere Hälfte weiß).

Ich hoffe, ihr könnt mir helfen!

Zergling-new · 21.01.2007, 17:48

Versuch mal "display:table-cell;vertical-align:middle"

Matze · 21.01.2007, 18:39

Klappt leider nicht. Wenn ich das in den Container-Div mache, bleibt alles unverändert. Wenn ich es in den Main-Div mache, seh ich nur ne weiße Seite.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.01.2007, 17:48
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Versuch mal "display:table-cell;vertical-align:middle"

21.01.2007, 18:39
Matze Benutzer Registriert seit: 10.01.2007 Beiträge: 34	Klappt leider nicht. Wenn ich das in den Container-Div mache, bleibt alles unverändert. Wenn ich es in den Main-Div mache, seh ich nur ne weiße Seite.