Hallo Experten,
wie zentriert man ein Bild oder ein anderes Objekt vertikal und horizontal in einem div container?
Gruß
Moni
Schwerdikal
Hallo Moni,
das ist einer der Gründe, warum Tabellenlayouts wohl so schnell nicht aussterben werden. Horizontal ist es kein Problem (CSS-Anweisung text-align). Für die Vertikale sieht’s problematisch aus.
Hier hat sich jemand für eine Zwischenlösung Gedanken gemacht: http://www.jakpsatweb.cz/css/css-vertical-center-sol…
Schöne Grüße,
Mohamed.
Hallo, Moni!
Versuchs mal mit
text-align: center; vertical-align: middle;
Quelle: http://www.css4you.de und dort unter „Text“
Viel Erfolg!
Liebe Grüße
Thomas
[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]
Hallo,
Hier hat sich jemand für eine Zwischenlösung Gedanken gemacht:
http://www.jakpsatweb.cz/css/css-vertical-center-sol…
Die dort angegeben Lösung ist ja auch nur eine Tabelle. Wenn „vertical-align:middle“ nicht funktioniert (was ja leider häufig der Fall ist), wirds schwierig. Standardkonform wäre „margin:auto“, aber der IE ist ja leider nicht standardkonform…
Wenn die Größe und Breite des Elemntes fix ist, gibt’s aber trotzdem ne einfache Lösung: Du postionierst das Element absolut („absolut“ bedeutet ja relativ zum Eltern-Element) mit top und left jeweils 50%; dann ist die links-oben-Ecke genau zentriert. Dann „verschiebst“ Du das Element mit negativem margin-left und margin-top (jeweils die Hälfte der Breite/Höhe), so daß es zentriert ist.
Bei unbekannter Größe des zu zentrierenden Elementes muß man allerdings rumtricksen…
Viele Grüße,
Juan
Wenn die Größe und Breite des Elemntes fix ist, gibt’s aber
trotzdem ne einfache Lösung: Du postionierst das Element
absolut („absolut“ bedeutet ja relativ zum Eltern-Element) mit
top und left jeweils 50%; dann ist die links-oben-Ecke genau
zentriert. Dann „verschiebst“ Du das Element mit negativem
margin-left und margin-top (jeweils die Hälfte der
Breite/Höhe), so daß es zentriert ist.
Dein Tipp hat einen Haken: Die horizontale Zentrierung. Die funktioniert so nicht immer. Horizontal sollte man immer margin:auto nehmen, das versteht sogar der IE. Wenn man die 50%-width/2-Variante nimmt, und das Browserfenster schmaler ist, als das Element breit, dann verschwindet der Inhalt links aus dem Browserfenster auf Nimmerwiedersehen, weil Scrollbalken nicht linkser als nach links scrollen können 
Das Problem müsste bei der anderen Richtung übrigens auch bestehen, nur hat man hier nicht wirklich eine Wahl, außer den IE zu ignorieren und dort auf eine Zentrierung zu verzichten, was sich aber die wenigsten Leute trauen.
Gruß,
-Efchen
Ich habs getan… einfach den IE ignoriert. Ich hab die Lösung mit dem display:table verwendet. Und es hat super geklappt. Nur hat der IE auf einmal nicht mehr horizontal zentriert…und ich habs ignoriert, das hat er verdient der IE
[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]
Ich habs getan… einfach den IE ignoriert. Ich hab die Lösung
mit dem display:table verwendet. Und es hat super geklappt.
Nur hat der IE auf einmal nicht mehr horizontal
zentriert…und ich habs ignoriert, das hat er verdient der
IE
Der IE ist in Sachen Standards so schlecht, er hat es wirklich nicht anders verdient. Es ist natürlich nicht tragbar, den IE zu ignorieren, wenn es um Dinge geht, die zur Benutzung der Site wichtig sind, aber bei so Kleinigkeiten, wie Zentrieren, ist es absolut eine gute Idee, auch mal keine Rücksicht auf Browser zu nehmen, dies einfach nicht draufhaben. Die Usability darf nicht leiden. Eine Website kann so oder so nicht auf allen Browsern gleich aussehen.
Gruß,
-Efchen