vertikal zentrieren?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansicht
aufmerksamer beobachter
element
folgendes code
funktionieren
http
machen
optimieren
recht bilde
schauen
setzen
span
tag
text
tun
url
verschweigen
wahl
zeile
zentrierung
-
Wie kann ich mittels HTML und CSS Text als auch Div mit unbekannter Höhe vertikal zentrieren?
Ich hab schon lang danach gesucht, aber keine wirklich einfache Lösung gefunden ohne Tabellen dafür zu missbrauchen.
und mit vertikal-align funktionierts irgendwie nicht... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hey ;)
zun schrieb:
und mit vertikal-align funktionierts irgendwie nicht...
vertical-align funktioniert schon. Nur muss man wissen WIE.
Auf der Seite findest du auch eine Demo.
Als tag/aufmerksamer beobachter">aufmerksamer Beobachter fällt dir auf, dass du z.B. innerhalb eines <p> Tags die <span> Elemente Vertikal zentrieren kannst ;)
(Diese Elemente können eine dynamische Höhe haben.)
Wenn dir das nicht gefällt, oder es aus welchem Grund auch immer bei dir nicht funktionieren sollte, gäbe es noch eine alternative mit CSS3, die aber leider noch nicht von allen Browsern unterstützt wird.
Wenn dir das auch nicht passt, kannst du dir noch ansehen, wie man das mit JavaScript macht. Ich habe das jetzt nicht probiert und würde dir auch nicht dazu raten, aber das ist nur meine ganz persönliche Ansicht. Verschweigen will ich es dir deswegen nicht.
Hoffe, das hilft dir weiter ;)
lg
Sincer -
das mit dem p-tag und span scheint, wie bei deinem Link, nur zu funktionieren, wenn in einer zeile unterschiedlich große texte sind. Die Zentrierung bezieht sich hierbei wohl nur auf die zeile und nicht z.B. auf ein Div.
leider sind CSS3 und Javascript keine Wahl für mich, aber trotzdem danke für deinen Hinweis ;D -
Hey ;)
zun schrieb:
das mit dem p-tag und span scheint, wie bei deinem Link, nur zu funktionieren, wenn in einer zeile unterschiedlich große texte sind.
Da hast du vermutlich recht. Bilde mir ein, dass ich es schon einmal irgendwie hin bekommen habe... Konnte das auf jeden Fall jetzt auf die Schnelle nicht wieder rekonstruieren :/
Naja, du kommst vermutlich nicht um das Table Layout herum, auch wenn's nicht schön ist.
Aber wie heißt's so schön: Zuerst mal schauen, dass es läuft, und dann optimieren ;)
lg
Sincer -
Man kann das Element auf relative position setzen, dann top:-50% und der margin-top müsste mit javascript berechnet werden, also erst die Höhe des Elements abfragen, dann durch 2 teilen und den Wert dann in Pixeln als margin-top verwenden.
-
Naja was du tun könntest, aber mit IE 7 oder kleiner nicht funktioniert, wäre folgendes:
<div style="display:table;height:100%;width:100%;"> <div style="display:table-cell;vertical-align:middle;"> <div>Ich möchte vertikal zentriert werden!</div> </div> </div> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
