Christian: Table vertikal ausrichten!

Hi,

ich habe eine Tabelle und möchte die vertikal ausrichten:

<body>

<table>
<tr><td>TEst</td></tr>
</table>

</body>

Sie soll also genau in der Mitte des Browser fensters erscheinen!!!

Versuche mit:

body, html
{
height: 100%;
vertical-align: middle;
}

oder

table
{
vertical-align:middle;
}

oder
body
{
height: 100%;
}
table
{
vertical-align:middle;
}

oder
body,html
{
height: 100%;
}
table
{
margin-top: auto;
margin-bottom: auto;
}

haben alle nichts gebracht!!!

Einer eine Idee??

Gruß
Christian

  1. Hallo Christian,

    ich habe eine Tabelle und möchte die vertikal ausrichten:

    mit CSS ist dieses Problem nicht praktikabel lösbar, bitte schaue
    dazu gegebenenfalls ins Archiv. Diese Aussage bezieht sich auch auf
    alle anderen Block-Level-Elemente.

    Viele Grüße,
    Stefan

  2. Hi!

    Was ist ein Dokument? Richtig! Eine Seite mit Inhalten, die sich seitenartig darstellen lassen.

    Und was ist ein Dokument nicht? Eine Seite, die sich nach dem Bildschirm ausrichtet (und nicht nach den Inhalten).

    Demnach ist die einzige Gestaltungsmöglichkeit diejenige, mit Frames das Ergebnis zu erreichen... (ob das nach deinem Geschmack ist weiß ich nicht).

    Schon mal aufgefallen, dass es beim <table>-Tag kein height und kein valign-Attribut gibt?

    Also: Es geht nicht, wenn du valide schreibst.

    cu

    Marc Reichelt || http://www.marcreichelt.de/

    --
    Linux is like a wigwam - no windows, no gates and an Apache inside!!!
    SELFCode: ss:| zu:) ls:[ fo:} de:[ va:} ch:? sh:) n4:° rl:? br:^ js:( ie:% fl:) mo:)
    http://emmanuel.dammerer.at/selfcode.html
    1. Hi!

      Ich glaube, ich schreibe hierzu bald mal einen Artikel.
      Die Frage, ob etwas in einem Dokument vertikal zentriert ausgerichtet werden kann, kommt einfach ZU oft hier im Forum vor...

      cu

      Marc Reichelt || http://www.marcreichelt.de/

      --
      Linux is like a wigwam - no windows, no gates and an Apache inside!!!
      SELFCode: ss:| zu:) ls:[ fo:} de:[ va:} ch:? sh:) n4:° rl:? br:^ js:( ie:% fl:) mo:)
      http://emmanuel.dammerer.at/selfcode.html
      1. Hallo Marc,

        Ich glaube, ich schreibe hierzu bald mal einen Artikel.

        http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm, bitte informiere
        Dich vorher umfassend im Archiv. Es ist mit Workarounds durchaus mög-
        lich Block-Level-Elemente vertikal zu zentrieren.

        Viele Grüße,
        Stefan

        1. Hi!

          http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm, bitte informiere
          Dich vorher umfassend im Archiv. Es ist mit Workarounds durchaus mög-
          lich Block-Level-Elemente vertikal zu zentrieren.

          Dann ist es eben möglich - aber W3C sieht dies nicht wirklich vor.
          Sonst gäbe es ja auch ein height- und ein valign-Attribut...

          cu

          Marc Reichelt || http://www.marcreichelt.de/

          --
          Linux is like a wigwam - no windows, no gates and an Apache inside!!!
          SELFCode: ss:| zu:) ls:[ fo:} de:[ va:} ch:? sh:) n4:° rl:? br:^ js:( ie:% fl:) mo:)
          http://emmanuel.dammerer.at/selfcode.html
    2. Hallo Marc,

      Und was ist ein Dokument nicht? Eine Seite, die sich nach dem Bildschirm ausrichtet (und nicht nach den Inhalten).

      demzufolge dürfte <table style="margin-left:auto;margin-right:auto;">
      nicht möglich sein ...

      Demnach ist die einzige Gestaltungsmöglichkeit diejenige, mit Frames das Ergebnis zu erreichen.

      Unfug, Frames sind keine Gestaltungsmöglichkeit, sie sind ein Kon-
      zept, welches bei näherer Betrachtung dem Gedanken von Hypertext
      widerspricht und leider Teil des HTML-Standards wurden, was jetzt
      langsam wieder geändert wird.
      Ansonsten läßt sich die vertikale Zentrierung von Block-Level-E.
      auch ohne Frames erreichen, nur eine "saubere" CSS-Lösung gibt
      es nicht.

      Schon mal aufgefallen, dass es beim <table>-Tag kein height und kein valign-Attribut gibt?

      <table style="height:100%;"> ist zulässig.

      Also: Es geht nicht, wenn du valide schreibst.

      Falsch, ich kann sehr voll eine Tabelle vertikal zentrieren und
      die Seite ist HTML 4.01 Strict und CSS level 2, nur ist es dann
      eben ein Workaround, z.Bsp. mit einer weiteren Tabelle drumherum.

      Viele Grüße,
      Stefan

  3. Hi,
    auch so,

    body, html

    ^^^^
    was soll das denn???

    {
    height: 100%;
    vertical-align: middle;
    }

    und warum willst Du eine 100% hohe Tabelle noch ausrichten?

    haben alle nichts gebracht!!!

    tja, studieren geht manchmal über probieren.

    Einer eine Idee??

    keine Idee sondern klassisch:
    mach's mit Tabelle in Tabelle. Hier ist zwar schon hundertfach behauptet worden, daß es mit CSS ginge (ich erwarte schon die bösen Antworten), aber den praktischen Beweis sind bisher ALLE Postings, die ich zu diesem Thema gelesen habe schuldig geblieben.

    Gruß, Andreas

    1. Hallo Andreas,

      body, html
              ^^^^
      was soll das denn???

      ist korrekt, html ist das übergeordnete Element von body und muß
      auch height:100%; bekommen.

      und warum willst Du eine 100% hohe Tabelle noch ausrichten?

      War mir nicht aufgefallen, da ich ohnehin nicht vorhatte, auf den
      Versuch einzugehen, weil ich weiß, dass es eben nicht möglich ist.

      Hier ist zwar schon hundertfach behauptet worden, daß es mit CSS ginge (ich erwarte schon die bösen Antworten), aber den praktischen Beweis sind bisher ALLE Postings, die ich zu diesem Thema gelesen habe schuldig geblieben.

      Stimmt, weil es nicht möglich ist, eine Tabelle vertikal auf einer
      Seite mit CSS zu zentrieren, wobei die Lösung kein Workaround sein
      soll. Sowas gibt es nicht, leider ;-)

      Viele Grüße,
      Stefan

  4. Moin, Christian!

    Unabhängig von den hier diskutierten Glaubensfragen rund um CSS gibt es meines
    Wissen _keine_ schöne CSS-Lösung, sehr wohl aber eine Reihe von Workarounds:

    1. Die bereits angesprochene Ein-Zellen-Tabelle mit deiner Tabelle drin.

    2. Die "Orlando"-Lösung (hab den Link verlegt, sorry):
    Kleinst-DIV (fast) mittig mit position:absolute und dann deine Tabelle relativ dazu
    50% nach oben ausrichten.

    3. margin-top:50% für das Dokument und dann die Tabelle um 50% ihrer selbst darüber.

    Lösung 1 ist die am wenigsten schöne, aber die mit den wenigsten "Mucken"!
    Mehr über die "Mucken" von 2+3 kannst du bei Bedarf (wie den Rest eigentlich auch ;-) )
    im Archiv nachschlagen.
    Validatorfest sollten alle drei Lösungen sein.

    Gruß

    Der Hans