Du bist nicht eingeloggt.

Login

Pass

Registrieren

Community
Szene & News
Locations
Impressum

Forum / Bits und Bytes

CSS div tag vertikal mittig zentrieren

Der666Diablo
Champion (offline)

Dabei seit 04.2006
23736 Beiträge

Geschrieben am: 26.07.2008 um 11:11 Uhr

morgen leute, hba hier grad irgendwie n totales blackout,
und zwar dabei, wie zentrier ich n div tag vertikal mittig?
mit margin-top und margin-bottom auto gehts nicht :( und sonst fällt mir grad nichts ein

Bei Geld, Sex und Kunst gibt es keinen abnehmenden Grenznutzen. http://shortlinks.de/oee9

septicus
Team-Ulmler (offline)


Dabei seit 08.2002
4436 Beiträge
Geschrieben am: 26.07.2008 um 11:18 Uhr

Das geht mit CSS allein nicht.
Am ehesten klappt das, indem du mit Javascript die Bildschirmgröße ermittelst und das dann ebenfalls über Javascript vertikal ausrichtest.
Jaky - 35
Halbprofi (offline)

Dabei seit 10.2006
239 Beiträge
Geschrieben am: 26.07.2008 um 11:18 Uhr

mhh.. also es ist ein variables Layout?! Denn ansonsten könntest du das ganze ja per padding oder vspace lösen ?!

Eigentlich müsst: "vertical-align:middle;" sein!

MfG Jaky

Der666Diablo
Champion (offline)

Dabei seit 04.2006
23736 Beiträge

Geschrieben am: 26.07.2008 um 11:23 Uhr

Zitat von Jaky:

mhh.. also es ist ein variables Layout?! Denn ansonsten könntest du das ganze ja per padding oder vspace lösen ?!

Eigentlich müsst: "vertical-align:middle;" sein!

jap, ist es...

mit valign dem hab ich's mittlerweile auch schon auf den überordneten tag probiert - geht aber auch nicht :-(

und@ septicus wäre ja 'ne Lösung, wenn ich nicht auf Javascript ganz verzichten wollen würde, damits mir das bei etwaig nicht aktiviertem nicht alles zerschiesst und unbenutzbar werden lässt

Bei Geld, Sex und Kunst gibt es keinen abnehmenden Grenznutzen. http://shortlinks.de/oee9

Chef_Ljubavi
Anfänger (offline)

Dabei seit 11.2007
23 Beiträge

Geschrieben am: 26.07.2008 um 11:57 Uhr

Also.......

Dein zu zentrierendes Bild hat eine Weite von 500px !!

position:absolute;
left: 50%;
margin-left: -250px; // Die Breite deines Bildes durch 2 mit einem MINUS davor!!!


Das wars !! ;-)

www.Kosovo-je-SRPSKO.com

Der666Diablo
Champion (offline)

Dabei seit 04.2006
23736 Beiträge

Geschrieben am: 26.07.2008 um 11:59 Uhr

Zitat von Chef_Ljubavi:

Also.......

Dein zu zentrierendes Bild hat eine Weite von 500px !!

position:absolute;
left: 50%;
margin-left: -250px; // Die Breite deines Bildes durch 2 mit einem MINUS davor!!!


Das wars !! ;-)

die horizontale hab ich schon durch margin left/right auto abgedeckt ;-)

Bei Geld, Sex und Kunst gibt es keinen abnehmenden Grenznutzen. http://shortlinks.de/oee9

Chef_Ljubavi
Anfänger (offline)

Dabei seit 11.2007
23 Beiträge

Geschrieben am: 26.07.2008 um 12:12 Uhr

oh shit, hab das gelesen was ich hören wollt.... :-D

das kannst nur in einer tabelle realisieren, indem sie 100% hoch und breit machst und dann absolut mitte angibst ! ;-)



www.Kosovo-je-SRPSKO.com

Der666Diablo
Champion (offline)

Dabei seit 04.2006
23736 Beiträge

Geschrieben am: 26.07.2008 um 12:18 Uhr

Zitat von Chef_Ljubavi:

oh shit, hab das gelesen was ich hören wollt.... :-D

das kannst nur in einer tabelle realisieren, indem sie 100% hoch und breit machst und dann absolut mitte angibst ! ;-)



will ich aber nicht :( also muss ich doch zum margin und dann halt in etwa angaben greifen :depri:

Bei Geld, Sex und Kunst gibt es keinen abnehmenden Grenznutzen. http://shortlinks.de/oee9

Jaky - 35
Halbprofi (offline)

Dabei seit 10.2006
239 Beiträge
Geschrieben am: 26.07.2008 um 19:15 Uhr

ohne JS und Tabellen denke ich schon^^



MfG Jaky

Blizz - 38
Halbprofi (offline)

Dabei seit 08.2003
268 Beiträge
Geschrieben am: 26.07.2008 um 19:55 Uhr
Zuletzt editiert am: 26.07.2008 um 19:56 Uhr

Gib deinem DIV ne "Linienhöhe".

.test {
line-height: 20px;
vertical-align: middle;
}

Probieren .. wenns nicht klappt: Lesen

http://phrogz.net/CSS/vertical-align/index.html
  [Antwort schreiben]

Forum / Bits und Bytes

(c) 1999 - 2026 team-ulm.de - all rights reserved - hosted by ibTEC Team-Ulm

- Presse - Blog - Historie - Partner - Nutzungsbedingungen - Datenschutzerklärung - Jugendschutz -