Objekt vertikal zentrieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absatz
auto
bild
code
container
dank
element
funktionieren
http
methode
mitte
option
position
problem
safari
tabelle
test
text
url
zeile
-
Hallo!
Ich weiß, dass es diesen Thread schon 100000 Mal überall im Internet gibt, aber ich hab nichts funktionierendes gefunden.
Bis jetzt hab ich das mit (in meinem Fall) top: 50%; margin-top: -250px; gelöst. Nur heute hab ich bemerkt, dass Chrome und Safari nicht mitspielen. Die achten in diesem Fall nur auf den margin-Wert. Hat jemand eine Idee wie man das lösen könnte?
Danke im Voraus! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich hatte dieses Problem mit einer Tabelle gelöst.
Einfach eine Tabelle ohne Rahmen erstellen.
width: 100%
height: 100%
vertical-align: middle
text-align: center
So sollte es funktionieren. Bisher habe ich keine bessere Lösung gefunden. Wenn du was finden solltest, wäre das sicherlich für viele hilfreich. -
Ein Link zur Problemseite wäre recht hilfreich gewesen...
Hatte dieses Problem auch schon mal, als ich den aussagekräftigen Text meiner genialen Seite http://☺.lima-city.de vertikal zentrieren wollte - einfach mal Seitenqueltext ansehen und nachmachen.
Im Prinzip erstellst du in einem div-Container eine transparente horizontale 1px-Linie die du mit
vertikal zentrierst. In diesem Container erstellst du einen weiteren Container mit dem Content, dem du die Höhe zuweist und z.B. eintop: 50%;
. Wichtig ist, dass beide Container auftop: -250px
stehen. Probiers einfach mal aus - du musst halt bei "meinem" (wurde irgendwoher geklaut) Code alles rauslöchen, dass den Text gleichzeitig horizontal zentriert.position: absolute -
Aber mein Vorschlag ist doch einfacher zu realisieren, als mehrere divs ineinander zu verschachteln. Oder nicht?
-
Danke für eure Antworten! Leider funktioniert irgendwie nichts von beiden. Wobei vertical-align bei mir (aus welchen Gründen auch immer) noch nie funktioniert hat.
kaetzle7 schrieb:
Ein Link zur Problemseite wäre recht hilfreich gewesen...
www.theyorecords.de/pics.html
Obwohl ich die Lösung nicht wirklich versteh hab ich eigentlich schon erwartet, dass sie funktioniert.. Deine Website find ich super!
-
yorecords schrieb:
Danke für eure Antworten! Leider funktioniert irgendwie nichts von beiden. Wobei vertical-align bei mir (aus welchen Gründen auch immer) noch nie funktioniert hat.
vertical-align musst du in einer CSS oder als style="" Angabe benutzen. Dann sollte es funktionieren. -
freeread schrieb:
yorecords schrieb:
Danke für eure Antworten! Leider funktioniert irgendwie nichts von beiden. Wobei vertical-align bei mir (aus welchen Gründen auch immer) noch nie funktioniert hat.
vertical-align musst du in einer CSS oder als style="" Angabe benutzen. Dann sollte es funktionieren.
Ich weiß. Funktioniert aber trotzdem nicht... Hab es gerade noch einmal getestet:
<html> <head><title>TEST</title></head> <body> <img src="thumbnails/0.gif" style="vertical-align: middle; margin-left: 40%;" alt=""> </body> </html> -
Ich kann dir leider nicht genau erklären, wie das vertical-align bei Inline-Elementen funktioniert, weil ich das immer nur verwirrend erzähle, aber im Grunde hast du 2 Optionen mit Css, wenn du es doch irgendwie simpel magst und vorallem die Höhe nicht kennst.
Option A: Du packst ein Inline-Block Element mit einer Höhe von 100% davor und richtest das auch nach der Mitte aus.
<html> <head><title>TEST</title></head> <body> <div style="display:inline-block;vertical-align: middle;height:100%;"></div> <img src="thumbnails/0.gif" style="vertical-align:middle;margin-left:40%;" alt=""> </body> </html>
Option B: Du simulierst Tabellen in CSS.
(Wie auch im sehr ähnlichen Thread: http://www.lima-city.de/thread/vertikal-zentrieren )
<html> <head><title>TEST</title></head> <body> <div style="display:table;height:100%;width:100%;"> <div style="display:table-cell;vertical-align:middle;"> <img src="thumbnails/0.gif" style="vertical-align:middle;margin-left:40%;" alt=""> </div> </div> </body> </html> -
euphoria schrieb:
Ich kann dir leider nicht genau erklären, wie das vertical-align bei Inline-Elementen funktioniert, weil ich das immer nur verwirrend erzähle, aber im Grunde hast du 2 Optionen mit Css, wenn du es doch irgendwie simpel magst und vorallem die Höhe nicht kennst.
Option A: Du packst ein Inline-Block Element mit einer Höhe von 100% davor und richtest das auch nach der Mitte aus.
<html> <head><title>TEST</title></head> <body> <div style="display:inline-block;vertical-align: middle;height:100%;"></div> <img src="thumbnails/0.gif" style="vertical-align:middle;margin-left:40%;" alt=""> </body> </html>
Option B: Du simulierst Tabellen in CSS.
(Wie auch im sehr ähnlichen Thread: http://www.lima-city.de/thread/vertikal-zentrieren )
<html> <head><title>TEST</title></head> <body> <div style="display:table;height:100%;width:100%;"> <div style="display:table-cell;vertical-align:middle;"> <img src="thumbnails/0.gif" style="vertical-align:middle;margin-left:40%;" alt=""> </div> </div> </body> </html>
Hab beide Codes genau so eingefügt, aber keiner fuktioniert. -
Hättest du denn einen Link zu der Seite, wo du genau das ausprobiert hast?
Wenn ich auf http://www.theyorecords.de/pics.html schaue, hast du da ja noch immer Tabellen.
Da habe ich die 1. Methode auch mal mit deiner Seite im Chrome ausprobiert und es hat gut funktioniert. -
euphoria schrieb:
Hättest du denn einen Link zu der Seite, wo du genau das ausprobiert hast?
Wenn ich auf http://www.theyorecords.de/pics.html schaue, hast du da ja noch immer Tabellen.
Da habe ich die 1. Methode auch mal mit deiner Seite im Chrome ausprobiert und es hat gut funktioniert.
Ich hab das nicht auf meiner Seite ausprobiert, sondern einfach eine HTML-Datei mit diesem Quelltext erstellt und die im IE geöffnet.
Es geht mir hier um eine Lösung die in jedem Browser funktioniert, da ich ja sonst einfach die oben beschiebene Methode lassen hätte können. Aber die hat eben in Safari und Chrome nicht funktioniert.. -
Ach ja, weil der IE natürlich die Höhe vom Body nicht so nett angleicht.
Diesmal mit einer festen Höhe in einem Container. (In Farbe, damit die Zentrierung auch sichtbar ist.)
<html> <head><title>TEST</title></head> <body> <div style="height:200px;background:#ccc;"> <div style="display:inline-block;vertical-align: middle;height:100%;"></div> <img src="thumbnails/0.gif" style="vertical-align:middle;margin-left:40%;" alt=""> </div> </body> </html>
Bedenke, dass folgendes erst ab IE 8 funktioniert.
<html> <head><title>TEST</title></head> <body> <div style="display:table;height:200px;width:100%;background:#ccc;"> <div style="display:table-cell;vertical-align:middle;"> <img src="thumbnails/0.gif" style="vertical-align:middle;margin-left:40%;" alt=""> </div> </div> </body> </html> -
Genau dieses Problem hatte ich vor ein paar Tagen auch und habe dann folgende Lösung dafür im Netz gefunden, die zumindest bei mir auch mit Chrome funktioniert:
<head/> ... <style type="text/css"> #center {display: block; text-align:center;} #content {width: 1000px; margin-left: auto; margin-right: auto;} </head> <body> <div id="center"> <div id="content"> .... </div> </div> </body>
Beitrag zuletzt geändert: 12.5.2012 8:06:56 von iso-sefz -
Funktioniert leider alles nicht... Getestet in IE9.
-
Weil ich wieder etwas vergessen habe. Tut mir Leid, ich neige zur Vergesslichkeit. Der Doctype muss zwingend dabei sein, da der IE sonst in den Quirksmode wechselt. (Support für schrecklich altes HTML)
Das heisst du schreibst auf der ersten Zeile vor der
Zeile entweder:<html>
Den HTML5 Doctype:
<!doctype html>
Oder einen HTML4 Doctype(Die parst der Browser sowieso nicht richtig und du bist mit dem HTML5 Doctype besser dran.) Siehe http://reference.sitepoint.com/html/doctypes für weitere Informationen.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Wenn es dann nicht geht reisse ich mir alle Haare aus dem Kopf, werfe meine Bildschirme aus dem Fenster und verbrenne meine Computer! -
euphoria schrieb:
Weil ich wieder etwas vergessen habe. Tut mir Leid, ich neige zur Vergesslichkeit. Der Doctype muss zwingend dabei sein, da der IE sonst in den Quirksmode wechselt. (Support für schrecklich altes HTML)
Das heisst du schreibst auf der ersten Zeile vor der
Zeile entweder:<html>
Den HTML5 Doctype:
<!doctype html>
Oder einen HTML4 Doctype(Die parst der Browser sowieso nicht richtig und du bist mit dem HTML5 Doctype besser dran.) Siehe http://reference.sitepoint.com/html/doctypes für weitere Informationen.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Wenn es dann nicht geht reisse ich mir alle Haare aus dem Kopf, werfe meine Bildschirme aus dem Fenster und verbrenne meine Computer!
Ok, danke! Werde das bei Gelegenheit mal testen. -
Blockelemente vertikal zu zentrieren ist wie ihr festgestellt habt nicht so einfach. Das liegt daran, dass es einfach nicht vorgesehen ist.
eine Möglichkeit ist es, ein solches Element innerhalb einer Tabelle vertikal zu zentrieren, diese Technik entspricht aber nicht der Philosophie dessen, wie man guten, sauberen Code schreibt und ist daher als depracated eingestuft.
Weiterhin ist vertical-align dafür da Inline- und Inlineblock-Elemente auszurichten. Man könnte zum Beispiel innerhalb eines Absatzes ein Wort ober an der Zeile ausrichten und ein anderes in der Mitte, anstatt auf der sogenannten Grundlinie.
Die Grundlinie ist die Linie in einer Zeile, auf der alle Buchstaben stehen außer die kleinen Buchstaben j, q, p und g, da sie noch ein paar Pixel nach unten Ragen. Auch Bilder in einem Absatz kann man so unterschiedlich Ausrichten. Mit DIV-Containern oder anderen Blocks geht das nicht.
Die einfachste Möglichkeit ist, wie von viele hier schon vorgeschlagen ein negativen Abstand zu dem umgebenden Elternelement zu schaffen. Eine 100% mittige Position kann man so aber so gut wie nie erreichen, es sei denn man hat von allem die fixen Höhen und rechnet auch die größe des zu zentrierenden Objekts mit ein. -
cyclobox schrieb:
Blockelemente vertikal zu zentrieren ist wie ihr festgestellt habt nicht so einfach. Das liegt daran, dass es einfach nicht vorgesehen ist.
eine Möglichkeit ist es, ein solches Element innerhalb einer Tabelle vertikal zu zentrieren, diese Technik entspricht aber nicht der Philosophie dessen, wie man guten, sauberen Code schreibt und ist daher als depracated eingestuft.
Weiterhin ist vertical-align dafür da Inline- und Inlineblock-Elemente auszurichten. Man könnte zum Beispiel innerhalb eines Absatzes ein Wort ober an der Zeile ausrichten und ein anderes in der Mitte, anstatt auf der sogenannten Grundlinie.
Die Grundlinie ist die Linie in einer Zeile, auf der alle Buchstaben stehen außer die kleinen Buchstaben j, q, p und g, da sie noch ein paar Pixel nach unten Ragen. Auch Bilder in einem Absatz kann man so unterschiedlich Ausrichten. Mit DIV-Containern oder anderen Blocks geht das nicht.
Die einfachste Möglichkeit ist, wie von viele hier schon vorgeschlagen ein negativen Abstand zu dem umgebenden Elternelement zu schaffen. Eine 100% mittige Position kann man so aber so gut wie nie erreichen, es sei denn man hat von allem die fixen Höhen und rechnet auch die größe des zu zentrierenden Objekts mit ein.
Erstmal danke für die schöne Erklärung!
Ich kenne die Höhe der zu zentrierenden Elemente, aber nicht des beinhaltenden Divs. (Zentriert sollte halt eigentlich die Tabelle werden die die Elemente im Div umgibt). Aber diese Variante war ja meine Grundvariante. So hab ich das gemacht, bis ich gemerkt habe, dass Safari und Chrome da nicht mitspielen..
Beitrag zuletzt geändert: 30.5.2012 13:25:39 von yorecords -
So, ich habe hier noch einen Artikel, der dir definitiv weiterhelfen wird:
http://designshack.net/articles/css/how-to-center-anything-with-css/ -
cyclobox schrieb:
So, ich habe hier noch einen Artikel, der dir definitiv weiterhelfen wird:
http://designshack.net/articles/css/how-to-center-anything-with-css/
Danke für den Link! Es ist auf jeden Fall eine Sehr informative Seite, aber soweit ich gesehen habe ist das was ich brauche nicht dabei.. Das große Problem ist ja, dass ich die Höhe des Parents nicht kenne, da er sich automatisch bis 30px vor den unteren Bildschirmrand zieht. Und die Methode top: 50%; margin-top: -höhe-des-elements-px; funktioniert in Chrome und Safari nicht.. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
