1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Frage zu Text Positionierung mit CSS

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von insanity, 18.12.06.

  1. insanity

    insanity Klarapfel

    Dabei seit:
    06.07.06
    Beiträge:
    277
    Hi @ll,
    ich habe einen 500*400px DIV-Container erstellt,

    Code:
    <div style="width:500px; height:400px">Inhalt</div>
    wie ich den Text Horizontal zentriert ausrichte ist klar,

    Code:
    text-align:center
    aber wie kann ich ihn Vertikal ausrichten? Hab's mit

    Code:
    vertical-align:middle
    probiert aber erreiche damit nicht das gewünschte Ergebnis. Wichtig ist halt das der Text egal wie groß er nun wird immer genau zentriert dargestellt wird. Geht sowas? Sonst muss ich wohl doch wieder auf Tabellen zurück greifen. Damit funktioniert es einwandfrei. :)
     
  2. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    das geht mit "line-height" und zwar genau mit dem Wert den du als Höhe angegeben hast.

    Code:
    <div style="width:500px; height:400px; line-height: 400px;">Inhalt</div>
     
  3. insanity

    insanity Klarapfel

    Dabei seit:
    06.07.06
    Beiträge:
    277
    danke, das funktioniert zumindest schonmal wenn es sich nur um eine zeile handelt, aber sobald der text länger wird und mal über 2, 3 oder auch 6 zeilen geht funktiniert es leider nicht. trotzdem danke für die schnelle antwort
     
  4. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    Das hattest du nicht dazu gesagt. Ich bin von "Inhalt" ausgegangen. Bei mehrzeiligen Text muss ich passen, jedoch weiss ich, dass es hier einen Beitrag zu gibt. Ich glaub "stk" hat da was zu geschrieben. Einfach mal suchen.
     
  5. floeschen

    floeschen Horneburger Pfannkuchenapfel

    Dabei seit:
    13.08.06
    Beiträge:
    1.402
    Soweit ich weiss, kann man das "vertical-align"-Attribut nur bei Tabellen, in TD-Tags, brauchen. Ausserhalb funktioniert es nicht. Schade! Ich brauchte es eben auch immer wieder...
     
  6. insanity

    insanity Klarapfel

    Dabei seit:
    06.07.06
    Beiträge:
    277
    und wie löst du das problem?
     
  7. atomfried

    atomfried Leipziger Reinette

    Dabei seit:
    02.04.05
    Beiträge:
    1.781
    wie er es löst weiss ich nicht. ich löse es so... ;)
    lass die höhe vom div weg und mach padding-top und padding-bottom, solange bis es passt.
     
  8. insanity

    insanity Klarapfel

    Dabei seit:
    06.07.06
    Beiträge:
    277
    ok, aber dann bin ich ja leider wieder nicht flexibel falls sich die zeilenzahl des textes ändert, was leider häufig der fall sein wird. :( ich denke dann werd ich wohl um eine tabelle nicht herum kommen?
     
  9. FirePot

    FirePot Gast

    Also vllt etwas "umständlich", aber so geht das ohne herkömmliche Tabelle. Dank der Display Eigenschaft von CSS, damit kann man solche Probleme meistens Lösen. Außer, dass dann hier noch ein zweiter Layer notwendig ist, auf den die Eigenschaften angewendet werden, die normalerweise auf das ursprüngliche Block-element angewendet werden.

    Code:
    #umTestHerum {
        position: absolute;
        left: 300px;
    /*Alle Block EIgenschaften hier herein*/
    }
    #Test {
        background: #fff;
        padding: 50px;
        height: 200px;
        width: 500px;
        display: table-cell;
        vertical-align: middle;
    }
     
  10. Skeeve

    Skeeve Pomme d'or

    Dabei seit:
    26.10.05
    Beiträge:
    3.121
    Wird aber nicht von jedem Browser verstanden. Auf der verlinkten Seite gibt es die Möglichkeit mit dem display Attribut rumzuspielen. Da kann man es dann ja mal rasch selbst ausprobieren.
     
  11. insanity

    insanity Klarapfel

    Dabei seit:
    06.07.06
    Beiträge:
    277
    hmm, also ich denke dann bin ich eventuell mit den tabellen noch schneller zu werke? ;) schade das css diese möglichkeit nicht direkt bietet. trotzdem dank an alle
     
  12. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
  13. floeschen

    floeschen Horneburger Pfannkuchenapfel

    Dabei seit:
    13.08.06
    Beiträge:
    1.402
    Ich versuche das Problem gar nicht erst entstehen zu lassen, sprich: Ich organisiere meine Designs so, dass ich das nicht brauche. Dazu muss ich allerdings auch sagen, dass meine Codierkenntnisse recht rudimentär sind, wie meine Website zeigt. ;)
     
  14. pepi

    pepi Cellini

    Dabei seit:
    03.09.05
    Beiträge:
    8.741
    Quasi OT: css gehört sinnvollerweise nicht inline ins Markup, sondern in ein eigenes File.

    Der komplette Code (Markup und Style) zum Ansehen und ausprobieren wäre nett. Hast Du die Möglichkeit das Zeug auf einen (halb)öffentlichen Server zu stellen oder hier zu posten?
    Gruß Pepi
     

Diese Seite empfehlen