HTML5: Element vertikal zentrieren

**mv_alex** · 26.01.2012, 18:11

Hallo zusammen,

ich möchte gerne einen "Kasten" im Main-Bereich - streng genommen den gesamten wrapper - eines HTML5-Layouts vertikal zentrieren.

Es gab dazu grundsätzlich zwar schon einige Threads, aber irgendwie funktionieren die Lösungen dort nicht für mich.

Ich bin so vorgegangen:

Der fe_page.html5 habe ich ein

HTML-Code:

<div id="floater"></div>

vor dem Beginn des wrappers hinzugefügt.

Dazu dieses Stylesheet ausprobiert:

Code:

html,
body
{
    height:100%;
    margin:0;
    padding:0;
} 

#floater
{
    width:1px;
    height:50%;
    float:left;
    margin-bottom:-200px;
    border:1px dotted #f00;
} 

#wrapper
{
    width:240px;
    height:400px;
    position:relative;
    clear:left;
    margin-right:auto;
    margin-left:auto;
    background:url("tl_files/chorhaus/layout/logo_weiss_240.png") center bottom no-repeat;
    border:1px dotted #fff;
}

Außer der automatisch eingefügten contao.css gibt es erstmal keine weiteren Stylesheets.

(Vielleicht liegt da schon das Problem, da hier schon position-Deklarationen mitgegeben werden.

Ich möchte das aber ungern mit static oder fixed überschreiben, um das Layout möglichst flexibel zu halten.)

Im Ergebnis sehe ich aber einfach kein vertikal zentriertes Element.

Habt Ihr sowas schon mal fehlerfrei umgesetzt und könnt mich auf die richtige Spur bringen?

Würde mich wirklich sehr über jede Anregung freuen!

Danke & Gruß Alex

**folkfreund** · 26.01.2012, 21:34

Hallo Alex,

ich denke nicht, dass das etwas HTML5-spezifisches ist.
Gibt's einen Link?

Und versuch mal zusätzlich

Code:

body
{
  width:100%;
}

Auf den floater kannst du dann vielleicht auch verzichten.

Gruß, folkfreund

**mv_alex** · 27.01.2012, 16:34

Hallo folkfreund,

vielen Dank für Deine Antwort.

Eigentlich glaub ich auch nicht, dass es an HTML5 liegt, aber ich seh einfach sonst den Fehler nicht. Andere im Forum haben das ja offenbar so hinbekommen.

Vom Verständnis her hätte ich auch gedacht, es reicht, den body auf Höhe 100% zu setzen und den wrapper auf 50%. Aber vielleicht funktioniert das nur mit absoluten Höhenangaben!?

Gruß Alex

**mike_mcfly** · 27.01.2012, 18:13

Ich habe per Google einen Author gefunden, der sich in der Sache sehr sicher scheint:

http://www.webdesign-in.de/mts/verti...-ohne-tabelle/

Kann ich allerdings nicht selbst nicht bestätigen ob's funzt!

**mv_alex** · 27.01.2012, 19:05

Hi,

interessante Lösung, aber den großen Nachteil kann man in den Kommentaren nachlesen:

Das ganze ist ja nett. ABER es funktioniert leider nur bis zu Browser Fenstergrößen die über (!) der des Inhalt liegen. Sonst verschwinden eben bis zu 50% des Inhalts im Nirvana und lassen sich auch durch Scrollbars nicht sichten. Ganz blöd für kleine Handybrowser!

Wie gesagt, würde ich das Layout gerne möglichst flexibel halten.

Gruß Alex

**mike_mcfly** · 27.01.2012, 19:09

Zitat von mv_alex

Hi,

interessante Lösung, aber den großen Nachteil kann man in den Kommentaren nachlesen:
Wie gesagt, würde ich das Layout gerne möglichst flexibel halten.

Gruß Alex

Das wird so nicht funktionieren. Also ich an Deiner Stelle würde einfach ein margin-top definieren und gut is...

**tblumrich** · 27.01.2012, 19:34

Hi.

Flexibel und fixe Höhe schließt sich doch schon per se aus, oder? Und letzteres wirst du brauchen damit du einen Anhaltspunkt hast für so eine Zentrierung.

Ich sehe es genau so... beides wird nicht gehen.

Gruß
Thomas

**mike_mcfly** · 27.01.2012, 20:24

vor über 10 Jahren hätte man das so gemacht:

1) Browserfenster per onload-js auf eine fixe Größe zementiert - scheiß drauf, wie der user das findet!
2) Dann eine Tabelle rein hauen und das Ding in Blei gießen - scheiß drauf, wie das semantisch korrekt wäre!
3) Und zu guter letzt hätte man dann noch ein 20MB-Flash-Intro reingedonnert - scheiß drauf, wie deine isdn-verbindung ächzt!

**Tinchen** · 27.01.2012, 21:06

Gleich vorneweg: ich bin auch kein CSS-Profi!

Soweit ich bisher erfahren habe, braucht es schon eine feste Höhe, um eine vertikale Zentrierung zu erreichen. Wenn Du diese für unterschiedliche Seiten erreichen willst, muß Du halt zur Not - betone - zur Not - entsprechend unterschiedliche Layouts anlegen, was allerdings viel mehr Arbeit macht oder das gesamte Layout nochmals überdenken.

Gruß
Tinchen

**folkfreund** · 29.01.2012, 10:37

Hi Alex,
beschreib bitte nochmal, wie sich die Seite verhalten soll wenn
a) der Inhalt weniger Höhe braucht als Platz im Fenster ist
b) der Inhalt höher ist als das Fenster

Was willst du mit der vertikalen Zentrierung erreichen? (Sorry, dass ich neulich 'horizontal' im Kopf hatte und darum wohl etwas verwirrend geantwortet hab)

Prinzipiell kannst du nicht vorhersehen, wieviel Platz beim Besucher deiner Seite im Browserfenster ist.
Wenn du trotzdem vertikal zentrieren willst, dann fällt mir nur eine Javascript-Lösung ein, die nur für den Fall a) greifen sollte. Dazu kannst du dir die benötigte Höhe und den vorhandenen Platz ermitteln (s. http://molily.de/js/css.html ganz unten) und dann die Eigenschaft top des #main anpassen. Aber ob das in allen Browser-Versionen funktioniert kann ich nicht garantieren...

Gruß, folkfreund

**mv_alex** · 30.01.2012, 08:47

Hallo zusammen,

ich wundere mich die ganze Zeit, warum scheinbar einfache Lösungen hier nicht greifen, wie z.B. hier beschrieben. Grundsätzlich scheint das doch machbar zu sein, auch ohne JS und absolute Höhe.

@folkfreund:

Eigentlich soll es so aussehen:

a) Inhalt wird als Block mittig (horizontal und vertikal) angezeigt. Verkleinert man den Browser, schrumpfen die Abstände gleichmäßig ein (flexibel bzw. "liquid").
b) Inhalt wird ohne Abstand angezeigt, nach unten muss man scrollen.

Was ich erreichen will? Nun, dass bei genügend Platz im Browser (z.B. Desktop) der Inhalt mit bekannter Größe in der Mitte "schwebt". Bei wenig Platz (z.B. Smartphone) soll dagegen kein Platz verschenkt werden, sondern der Inhalt am oberen Rand beginnen.

Gruß Alex

**Fabio** · 30.01.2012, 12:22

Zitat von mv_alex

Hallo zusammen,

ich wundere mich die ganze Zeit, warum scheinbar einfache Lösungen hier nicht greifen, wie z.B. hier beschrieben. Grundsätzlich scheint das doch machbar zu sein, auch ohne JS und absolute Höhe.
...
Gruß Alex

Das ist auch nur eine gefakte tabelle.

Mit einer tabelle ist das zimlich einfach aber hat mit dem state of art nicht mehr zu tun.

für die css lösung benötigst du zwingend eine feste höre des elements oder du liest sie dir mit js aus der rest ist ganz einfach

Code:

#wrapper{
height:x;
position:absolute;
top:50px;
margin-top:-(x/2);
}

x zu ersetzten mit deiner höhe wo auch immer die herkommt.

**folkfreund** · 31.01.2012, 22:05

@Fabio

Zitat von Fabio

Das ist auch nur eine gefakte tabelle.

Das stimmt nicht für den von Alex favorisierten Weg 3.
Und außerdem, warum sollte man

Code:

display:table

nicht verwenden? Wenn ich wirkliche Tabellendaten habe, dann (und nur dann) nehme ich <table>. Aber die CSS-Variante beschreibt doch nicht die Semantik, sondern die Formatierung. Und das ist durchaus 'state of the art'.

Der Weg 3 von Douglas Heriot geht allerdings von einer bekannten Höhe des zu zentrierenden Bereichs aus. Dem widerspricht der Ansatz von Alex mit

Code:

min-height:100%

in der aktuellen Version der Testseite.

Der Lösungsansatz benötigt also
1. im zu zentrierenden Element height: n
2. im floater margin-bottom: -n/2

Anders als Douglas Heriot empfinde ich jedoch die Festlegung auf eine Höhe als gravierenden Nachteil.

Ich werd mal weiter überlegen...
folkfreund

**Fabio** · 01.02.2012, 10:14

?

Wenn man die Situation aus den ersten Posting nimmt reicht wenn man einfach das hier schreibt um alles zu zentrieren

Code:

#wrapper{
    position:absolute;
    top:50%;
    left:50%;
    margin:-200px 0 0 120px;
    width:240px;
    height:400px; 
    background:url("tl_files/chorhaus/layout/logo_weiss_240.png") center bottom no-repeat;
    border:1px dotted #fff;
}

Code:

<div id="floater"></div>

das benötigt man nicht mehr

p.s. mir ist gerade aufgefallen das in meinen letzten eintrag ein fehler war sollte natürlich 50% heißen und nicht 50px

**mv_alex** · 06.02.2012, 09:32

Zitat von Fabio

Wenn man die Situation aus den ersten Posting nimmt reicht wenn man einfach das hier schreibt um alles zu zentrieren

Hab ich ja auch gedacht. Scheint aber nicht ganz so einfach zu sein. Habe es jetzt mal so eingestellt und wieder sämtliche Angaben außer der contao.css entfernt.

Gruß Alex

EDIT: Hoppla! Das hätte ja "-120px" heißen müssen. Im Augenblick sieht es vielversprechend aus.

Könnt Ihr das vielleicht mal mit unterschiedlichen Browsern testen? Danke!

**tblumrich** · 06.02.2012, 11:21

Zitat von Fabio

Code:

<div id="floater"></div>

das benötigt man nicht mehr

Wie schon früher angemerkt, hat man dann das Problem, dass u.U. der Content nicht mehr erreichbar ist (kleine Auflösungen der Ausgabe).
Daher finde ich diese Lösung immer noch am besten... wie gesagt mit fester Höhe.

Gruß
Thomas