Text horizontal und vertikal mittig zentrieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
bild
boxen
code
dank
datei
definieren
element
foto
http
mitte
mittelpunkt
page
position
rand
schrift
teil
text
url
zahl
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn das Foto angenommen 300px hat, setzt du einen margin von top ins Minus von der Hälfte, also -150px.
position: relative; top: 50%; margin-top: -150px;
Somit erreichst du, dass der Mittelpunkt des Bilder genommen wird und nicht der Rand. Also wird bei top: 50% auch mittig platziert. -
c143 schrieb:
Wenn das Foto angenommen 300px hat, setzt du einen margin von top ins Minus von der Hälfte, also -150px.
position: relative; top: 50%; margin-top: -150px;
Somit erreichst du, dass der Mittelpunkt des Bilder genommen wird und nicht der Rand. Also wird bei top: 50% auch mittig platziert.
Danke, aber geht irgendwie nicht.
Ich will auf der Seite http://leyup.de/Page/ den Text Hallo komplett in die Mitte, aber ich habe keine Ahnung wie.
Css: http://leyup.de/Page/css.css #Box ist der Teil mit dem Text
Gruß Leyup -
Erstens hat die Box keine feste Höhe, sonder nur <br> am Ende und es ergibt sich eine. Zweitens brauchst du eine Box in der Box. Wenn du den margin von der jetzigen änderst, ändert sich nur der Abstand zum Bild oben. Wenn du einen weiteren div darin erstellst, mit einer class kannst du diese so definieren, dass sie in der Mitte von deiner #box steht.
Und nebenbei, id's sollten einmalig sein, wenn du mehrere Elemente in CSS definieren willst benutz class="box" und dann anstatt #box -> .box -
Mmm class okay, werde ich machen, aber weiter kommen tue ich jetzt immer noch nicht.
Hab keine Idee wo ich ein Div Sätzen könnte.
Gruß -
Okey, mein Fehler. Ich war ein wenig durcheinander weil es im ersten Post um ein Bild ging und jetzt um Text.
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" type="text/css" media="all" href="http://leyup.de/Page/css.css"> <style type="text/css"> .vertical{ padding: 30px 0px; } </style></head> <body> <div id="header"></div> <div class="box"><div class="vertical">hallo</div></div> <div class="box"><br><br><br><br><br><br><br><br></div> </body></html>
Ich hab das jetzt einfach direkt ins HTML reinediteirt, aber das kannst du auch in deine CSS Datei schreiben. Ich setze ein padding von 30px 0px. Das bewirkt oben und unten 30 px = 60 px höhe und die Schrift ist in der Mitte. Du kannst die Zahl auf alles ändern, die Höhe der Box wird einfach das doppelte, aber die Schrift bleibt in der Mitte. -
Danke, es Funktioniert :D
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage