<div> Element vertikal zentrieren

  • Hallo,

    ich habe ein Problem beim gestallten einer Seite. Ich habe ein <div> in dem sich <table> und

    Elemente befinden. Nun möchte ich dieses <div> vertical auf meiner Seite zentrieren.

    Achja das <div> Element befindet sich in einer Tabelle, die die Seite auf eine Breite von 600px reduziert.

    <table><tr><td>
    <div> ... </div>
    </td></tr></table>

    Mir ist bewusst, dass dies schlecht gelöst ist, habe aber gerade keine Zeit, eine bessere Lösung umzusetzen.

    Nun möchte ich das <div> Element und dessen Inhalt innerhalb des <td> Elements vertival Zentrieren. Wie kann ich das tun? Mit

    style="valign:middle" oder style="vertical-align"

    hat es nicht funktioniert.

    Gruß

    Tikonteroga

  • hm.... schaumal wie groß deine tabelle is.
    vermutlich musst ihr die breite von 100% geben.

    dem div hast ja schon 600px zugewiesen...

    dann kommt noch ins td align="center" valign="middle"

  • du kannst ein div zentrieren indem du einen Aussenabstand (margin) definierst und den Abstand links und recht in pixel gleich angibst.

    Beispiel:
    .klasse {margin: 0 40px;}

    <div class="klasse">sollte dann zentriert sein</div>

    wenn du nur einen Textabsatz zentrieren willst kannst du das auch so machen:

    .klasse {text-align:center;}

    <p class="klasse">Ist ganz sicher zentriert</p>

    So mach ich das bei meinen Seiten zumindest so, allerdings setzte ich überall auf absolute Positionsangaben (also pixel, nicht prozent). Die richten Werte musst du dir halt ausrechnen ;)

  • Hmmm....

    1. dachte ich die Frage wäre nach einer vertikalen Zentrierung und nicht nach einer horizontalen ?
    2. Div-Tags kann man nicht vertikal zentrieren, das kommt evtl. mit CSS 3
    3. wozu überhaupt einen Div-Tag, wenn du doch schon ein Elternelement (die Tabellenzelle) hast, welche dann auch noch von ganz allein vertikal zentriert ist ?

    wundert sich mal wieder ...

    Ronald

  • Hallo,

    danke für die Lösungsvorschläge. Ich habe das <div> Element entfernt und das <td> Element als Elternelement benutzt, um dessen Inhalt vertical zu zentrieren. Es hat also geklappt, vielen Dank nochmal.

    Wenn meine Vorgehensweisen manchmal dem Einen oder Anderen komisch vorkommen, bitte ich um Nachsicht. Ich bin auf dem Gebiet HTML noch sehr neu und unerfahren.

    Gruß

    Tikonteroga