Text vertikal zentriert im div?

  • Hi zusammen,

    eigentlich bin ich recht fit im HTML, allerdings kriege ich hier grad die Krise, weil ich es nicht schaffe einen Text in einem DIV vertikal zentriert anzuordnen. Er "klebt" ständig oben am Div!!

    Eigentlich müsste es ja mit vertical-align:center klappen, oder nicht?

    Neku

  • @macrosdesign: line-height funktioniert leider nicht =(

    Bambino: Der Link nutzt mir leider nichts. Ich habe bereits danach gegoogelt und da ich keine funktionierende Lösung gefunden hatte, dachte ich mir, dass man mir hier vielleicht weiterhelfen kann.

  • Wie wäre es wenn du uns mal den Code gibst wo das Problem auftritt ?

  • Okay, mein html-Code ist folgender:

    Zitat

    <div id="start">
    <div id="startlinks"><img src="templates/mytemplate/images/start_exist.png" border="0" /></div>
    <div id="startrechts"><h3>Headline!</h3>
    Wir bieten frisch gebackenen Unternehmensgründern blabla...</div>

    Und mein CSS ist dieser:

    Der Text im div startrechts klebt halt immer oben am div, statt sich immer so anzuordnen dass er in der Mitte des divs steht. =(

    Nein, ich bezweifle, dass du gegoogelt hast:

    http://www.wssexpert.de/Style/Examples/007/center.html

    Da steht alles und es ist das erste Google ergebnis!

    Bezweifle es ruhig, es ist aber anders. Ich habe außerdem betont, dass diese Ergebnisse eben nicht bei mir zum Ergebnis führten und ich deshalb hier im Forum mein Problem geschildert habe.

    Einmal editiert, zuletzt von synaptic (7. März 2010 um 18:18) aus folgendem Grund: beiträge zusammenführt! Vermeide bitte Doppelposts und nutz die editfunktion

  • Nicht ganz: Ich möchte ausschließlich vertikal zentrieren.

    Habe es trotzdem ausprobiert soweit wie ich es verstanden habe, allerdings klappt auch dies nicht =(

  • Das unterste Beispiel von Bambino ist die einzige Möglichkeit für richtiges Zentrieren von Inhalten.
    Es heißt aber nicht vertical-align: center, sondern middle.
    display: table-cell; ist dafür auch essentiell.

    Dein Problem ist, dass du den Inhalt des Containers Zentrierst, nicht dein DIV selbst.
    Bei deinem #start div, wirst du es allerdings nicht eingeben können - damit geht 100% höhe nichtmehr... Die übrigens so auch nicht funktioniert.

    HTML
    html, body { height: 100%;  } /* nicht heigth */
    #start {
    height: auto !important;
    min-height: 100%;
    }

    Die Lösung von Macrosdesgin funktioniert zwar, hat aber ein paar macken... Wenn jemand eine zu kleine Auflösung / das Fenster kleiner macht, ist es möglich das Inhalte abgeschnitten werden. Bei Höhe dürfte das allerdings seltener ein Problem sein, als bei der Breite...

    Für 100% Seiten sind meiner Meinung nach, Tabellen nötig. Werden auch mitlerweile sehr selten eingesetzt, da die Darstellung sehr varieren kann (Auflösungsunterschiede von 1024 breite bis zu 1600 breite und höher - wie da wohl deine Seite später aussehen würde?) ich empfehle dir, dich bei der Breite festzulegen. Standard ist 980-1000px.

  • Ich habe es jetzt hinbekommen. Habe bemerkt, dass das vertical-align nur bei Absatzelementen funktioniert... Mein CSS/HTML sieht nun so aus und funktioniert einwandfrei:

    Zitat

    HTML

    <div id="start">
    <div id="startlinks"><img src="templates/mytemplate/images/start_exist.png" border="0" /></div>
    <div id="startrechts"><p><h3>Headline!</h3>
    Wir bieten frisch gebackenen Unternehmensgründern blabla...</p></div>

    Einen großen Dank an alle, die mir helfen wollten ^^

    Neku

  • Weil eine Überschrift ein blockelement ist - semantisch ist es inkorrekt :P <p> steht für Absatz, eine Überschrift steht davor. kA ob der Validator da meckern würde - habs nie ausprobiert...

    Ahja, fals jemand sich hier wundern sollte... Der Schnipsel da oben funktioniert so nicht.

  • Weil eine Überschrift ein blockelement ist - semantisch ist es inkorrekt :P <p> steht für Absatz, eine Überschrift steht davor. kA ob der Validator da meckern würde - habs nie ausprobiert...

    Ahja, fals jemand sich hier wundern sollte... Der Schnipsel da oben funktioniert so nicht.

    Dadurch erreiche ich aber, dass der Text in der gleichen Zeile wie die Überschrift weitergeht – und das ist genau das, was ich haben will. Dann sieht es nämlich so aus:

    Zitat

    Die ist die Headline! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

    und nicht so:

    Zitat

    Die ist die Headline!

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

    Das habe ich bisher halt immer so gemacht und wüsste auch nicht, wie ich es anders lösen sollte. Wenn jemand eine bessere (oder korrektere) Lösung hat: Her damit! :D

  • z.B.

    HTML
    <span style="font-weight:bold">Die ist die Headline!</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  • dann schreibe doch per CSS die Eigenschaften dieses Blocks um, und dann klappt das auch.. ^^

    Es ist doch so vorgegeben, dass es nicht so sein darf, laut W3C.

    wert.TeeeX.de
    Wie gut ist die technische Umsetztung deiner Website wirklich?
    Teste es!