Kommentare zu: Vertikal und horizontal zentrieren ohne Tabelle

Von: AMTT

AMTT — Tue, 15 Mar 2011 08:14:22 +0000

Funktioniert perfekt.
Manche Dinge können so einfach sein, wenn man nur weiß wie

Vielen Dank nochmal.

Von: Ventil

Ventil — Tue, 07 Sep 2010 20:03:53 +0000

Also ich glaube ohne JS kommt das hier dem gewünschten Ergebnis am Nächsten:

.container
{
position: absolute;
left: 50%;
top: 44%;
text-align:center;
width: 100%;
margin-left: -53%;
}

.content
{
width:5em; height:5em; background-color:#F93; color:#F33; margin-left: 50%;
}

Natürlich müssen die % Angaben immer dem Content angepasst werden (aber das kann man zB mit Kurzklassen machen class=”container 50pro”, wobei in .50pro halt nur die Prozentangabe ist).

Es ist nicht perfekt – aber perfekt geht offenbar einfach nicht.

Von: therealanodyne

therealanodyne — Sun, 29 Aug 2010 15:58:21 +0000

Hallo lieber Blogbetreiber.
Mit Verlaub, ich verstehe deine Beispiele oben nicht.
Die Bilder mit der Überschrift:
“Bilder vertikal und horizontal zentrieren”
1. klebt am unteren Rand des Containers, 2. ist ja nicht zentriert, da der Container ja nicht höher als das Bild ist.

Habe deinen Code losgelöst mit Text getestet, funktioniert wunderbar. Was aber ist, wenn ich einen absolut positionierten Container mit fester Breite und Höhe habe und dort Bilder mit variabler größe vertikal und horizontal zentrieren möchte ?
Eine Idee dazu ?

Ansonsten, vielen Dank für deine Mühe mit anderen Menschen dein Wissen zu teilen.

Von: Sebastian aus Köln

Sebastian aus Köln — Tue, 20 Jul 2010 15:45:40 +0000

Ich denke auch, dass die Lösung v.a. auf iPhone / iPad und anderen mobile Displays einige Nachteile hat. Aber so ist das… was heute funktioniert, muss morgen nicht mehr.

Von: Chris

Chris — Sat, 05 Jun 2010 10:06:58 +0000

Nun ja da spricht wieder was dagegen – Kosten. Es reicht ja schon wenn man für den allseits defekten, aber leider weit verbreiteten, Kleinweich-Browser Ausnahmen einbauen muss. Da bewege ich mich lieber weniger “stylisch” und nehme tables.

Von: mts

mts — Sat, 05 Jun 2010 10:00:21 +0000

ja Christ den kleinen HandyBrowsern kann man ein eignes Layout liefern,
da ist ja zentrieren sowieso umsonst oder für die Katz

Von: Chris

Chris — Fri, 04 Jun 2010 21:09:43 +0000

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!

Von: Tobias

Tobias — Fri, 12 Mar 2010 09:20:22 +0000

Nein – das ist vertikal zentrierter T E X T. Aber setze mal ein anderes div rein .

top:50%;
margin-top:-xxem;

xx=halbe Inhalts-Höhe. Wie gesagt: Ohne feste Höhenangaben geht´s imho nicht.

Von: hmmmm

hmmmm — Fri, 12 Mar 2010 08:47:32 +0000

div#Feld
{
width: 180px;
height: 36px;
font-size: 0.6em;
line-height: 36px;
}

Vertikal zentriertes Feld

Von: Tobias

Tobias — Mon, 01 Mar 2010 13:52:51 +0000

Vorab: Hallo, liebe Leidensgenossen! =)

Also irgendwie scheint das Problem immer spätestens da anzufangen, wo die Höhe der Divs variabel wird. Für den einen oder anderen Browser kann man da Lösungen basteln, aber wirklich cross-browser-fähigen Code habe ich persönlich bisher weder gesehen noch selbst hinbekommen. Auf reinen html/css Seite ohne CMS benutze ich deswegen stets eine Angabe wie style=”min-height:58em;” auf jeder Einzelseite.