Text bzw. Absatz oder Blockelemente mit CSS vertikal ausrichten???

Dieses Thema im Forum "Web Page Design" wurde erstellt von orgonaut, 27.06.2006.

  1. orgonaut

    orgonaut Thread Starter MacUser Mitglied

    Beiträge:
    10.240
    Zustimmungen:
    768
    MacUser seit:
    09.08.2004
    Ich suche mich jetzt schon seit Stunden im Internet zum Dodel. Ich war auf Selfhtml und auf jeder Menge schlauer Seiten bezüglich CSS. Sogar einen Thread mit genau meiner Frage habe ich in einem anderen Forum gefunden, nur eben leider ohne Lösung! :confused:

    Hier ein weiteres meiner Fundstücke:
    Dass das nicht geht weiß inzwischen auch sehr gut, aber wie kann man diese Klippe umschiffen? Es muss doch noch einen anderen, besseren Weg geben als eine einsame Tabellen-Zelle zu erstellen???

    Mein Ziel ist eine W3C konforme XHTML Seite auf der ich eine Blockelement (<div>; möglichst eines das nicht über eine genau festgelegte Höhe verfügen muss) nach allen Regeln der Kunst horizontal und vertikal zentriert habe und darin auch noch einen Text, ebenfalls horizontal und vertikal zentriert! -> Bitte das kann doch nicht so schwer sein!!! :koch:

    Weitere gefundene Links:
    http://www.stichpunkt.de/css/css-tipps.html#zentrieren
    http://www.mediengestalter.info/forum/22/html-inhalt-in-der-mitte-zentrieren-ausrichten-17476-3.html
    http://www.manuelbieh.de/www/blog/vertikal-zentrierte-seiten-mit-css
    http://www.thestyleworks.de/tut-art/centerblock.shtml
    …usw.
     
    Zuletzt bearbeitet: 27.06.2006
  2. Galanos

    Galanos MacUser Mitglied

    Beiträge:
    624
    Zustimmungen:
    23
    MacUser seit:
    19.12.2005
    Ich habe mir auch mal 'nen Wolf danach abgesucht.
    Am einfachsten ist es noch, wenn dein <div> eine feste Hoehe in Pixeln hat, dann kannst du mit negativem Margin arbeiten:
    - Elternelement mit 50% Padding-Top versehen
    - dem <div> die negative Haelfte seiner Hoehe in Pixeln als Margin-Top geben
     
  3. orgonaut

    orgonaut Thread Starter MacUser Mitglied

    Beiträge:
    10.240
    Zustimmungen:
    768
    MacUser seit:
    09.08.2004
    Gut, wenn's nicht anders geht, dann verzichte ich eben auf Blockelemente mit variabler Höhe. :( Aber wie kann ich Text innerhalb eines Blockelements zentrieren? Im Augenblick mach ich das, recht pfuschig, über eine line-height: die genau der Höhe des <div> entspricht. Das Problem, verkleinert oder vergrößert man den Text, rutscht dieser trotz Pixelwerten aus der Mitte. Agrrr :heul:

    Beispiel

    Edit: Habe einen Ansatz gefunden um Blockelemente mit variabler Höhe auf einer Seite zu zentrieren. Leider zeigt Safari bei diesem Beispiel immer mindestens einen Scroll-Balken und das <div> wirkt nicht mehr zentral.

    Edit: Inzwischen habe ich dank dieser Seite eine passable Lösung für mein aktuelles Problem gefunden.

    Was mit aber immer noch nicht wirklich klar ist wie man Text innerhalb eines <div> vertikal zentriert. Ausserdem hat meine aktuelle Lösung den Nachteil, dass sich das Blockelemente in der Höhe mitändern muss, damit der Text zentriert bleibt.

    Wäre sehr erfreut über eine passende Lösung dieser Problematik! :)
     
    Zuletzt von einem Moderator bearbeitet: 17.03.2016
  4. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    Ich habe es mal so gelöst, dass ich den DIV-Container per "display"-Eigenschaft als Tabellenzelle darstellen lassen habe - so ging es. War allerdings Fummelkram und nicht sehr elegant.

    Wir werden wohl auf CSS v3 warten müssen...

    2nd
     
  5. Vanilla Bear

    Vanilla Bear MacUser Mitglied

    Beiträge:
    912
    Zustimmungen:
    97
    MacUser seit:
    07.11.2005
    Hallo allerseits,

    ich hol den Thread mal aus der Versenkung, denn ich hab ein ähnliches Problem (oder glaub ich das zumindest, ich bin gerade erst dabei mir html/css anzueigenen)

    Jedenfalls geht es um das Theme von meinem Tumblr-Profil (dieses hab ich nicht selbst geschrieben, sondern ein vorgefertigtes genommen, das ich jetzt abändere). Ich bekomme es einfach nicht hin, diesen einen vertikalen Abstand zu verkleinern (siehe Anhang)
    Könnte mir bitte jemand auf die Sprünge helfen, wie man das am besten macht. :)
    Hier noch der Link zum Problem: KLICK
     

    Anhänge:

  6. doger

    doger MacUser Mitglied

    Beiträge:
    2.203
    Zustimmungen:
    171
    MacUser seit:
    11.11.2004
    Code:
    .post .content {
        background: none repeat scroll 0 0 #FFFFFF;
        border-right: 0.5em solid #444444;
        margin-right: 23.5em;
        [COLOR="red"]min-height:[/COLOR] 7.2em;
        [COLOR="red"]padding:[/COLOR] 3em;
    }
    
    Das war aber schon mehr als Leichenschändung. :Oldno:
    Sind die Werte die angepasst werden können um den Abstand zu verringern.

    //doger
     
  7. Vanilla Bear

    Vanilla Bear MacUser Mitglied

    Beiträge:
    912
    Zustimmungen:
    97
    MacUser seit:
    07.11.2005
    Tausend Dank für die schnelle Hilfe, doger.
     
Die Seite wird geladen...

Diese Seite empfehlen