Chräcker Heller: Wort mittig/mittig positionieren (jaja....)

Hallo,

ich weiß, ich hätte auch gleich nach den beiden Frames fragen können, aber nach einer Weile im Archiv glaube ich langsam, das es doch nicht so leicht ist wie es scheint. Eine menge Tips, aber selbst bei copy-and-paste muß ich wohl was falsch machen.

Einfache Frage: Wie bekomme ich einen beliebigen Inhalt, sagen wir das Wort "Hallo" vertikal und horizontal strict per css in die Mitte? (Ja, ich habe dem body und dem html-Bereich eine 100% Höhenvorstellung verordnet, und dann Divs und Tables um mein Wort gelegt, natürlich selbige margins mit auto versehen etc.... es mittet nicht bei mir....

Chräcker

  1. Hi Chräcker,
    magst du denn noch anderen Content auf der Seite haben? :)
    Ciao Sascha

    1. Hallo,

      magst du denn noch anderen Content auf der Seite haben? :)

      kommt bei mir manchmal sogar vor ,-) Aber nichts, was nicht in ein Div oder in eine Tabellenzelle passen würde.... die Antwort "oben" paste damit schon, Danke trotzdem....

      Chräcker

      1. Kein Problem (du Stempelfanatiker *g+)
        Ich bekenne mich nun auch schon zu dieser Sucht ;)

        Ciao Sascha

  2. Hallo,

    Einfache Frage: Wie bekomme ich einen beliebigen Inhalt, sagen wir das Wort "Hallo" vertikal und horizontal strict per css in die Mitte? (Ja, ich habe dem body und dem html-Bereich eine 100% Höhenvorstellung verordnet, und dann Divs und Tables um mein Wort gelegt, natürlich selbige margins mit auto versehen etc.... es mittet nicht bei mir....

    *g*

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html style="height:100%;">
    <head>
    <title>Text in der Mitte</title>
    </head>
    <body style="height:100%;">
    <table style="width:100%; height:100%;">
     <tr>
      <td style="text-align:center; vertical-align:middle;">
        Hallo
      </td>
     </tr>
    </table>
    </body>
    </html>

    So sollte es mitten.

    viele Grüße

    Axel

    1. Hallo,

      DANKE!!! wie gut, daß ich nicht fies vor Tabellen bin ;-))))

      (Und damit alle anderen Archivsucher wie ich diese Lösung besser finden gleich noch ein paar zu indizierende Suchbegriffe für die Suchmaschine:

      Inhalt zentrieren vertikal vertical css mitte mitten horizontal div tabelle inhalt blödes css Tabellenmißbrauch height 100% wieso nur) ;-)

      Chräcker

      1. Hallo,

        (Und damit alle anderen Archivsucher wie ich diese Lösung besser finden gleich noch ein paar zu indizierende Suchbegriffe für die Suchmaschine:

        Inhalt zentrieren vertikal vertical css mitte mitten horizontal div tabelle inhalt blödes css Tabellenmißbrauch height 100% wieso nur) ;-)

        *g*

        Na, da machen wir doch die _in_ der Tabelle zentrierte Tabelle auch noch hier rein:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
        <html style="height:100%;">
        <head>
        <title>Tabelle in der Mitte</title>
        </head>
        <body style="height:100%;">
        <table style="width:100%; height:100%;">
         <tr>
          <td style="text-align:center;">
           <table border="1" style="margin:auto;">
            <tr>
             <td>Zellinhalt</td>
            </tr>
           </table>
          </td>
         </tr>
        </table>
        </body>
        </html>

        viele Grüße

        Axel

  3. Hi Chräcker Heller,

    bei der vertikalen Zentrierung braucht CSS einen Bezugspunkt, z.B. eine Tabellenzelle. Wenn Du das Gleiche ohne Tabellen erreichen willst, kannst Du per span einem Leerzeichen im gleichen Absatz eine line-hight von der Höhe des Divs verpassen und dann hast Du auch ohne Tabelle einen Bezugspunkt, auf den sich die vertikale Zentrierung beziehen kann. Ideologisch kämest Du dann der reinen Lehre ein Stück näher *g* EIgentlich irre, wie böse Tabellen sind!

    Viele Grüße
    Mathias Bigge

    1. bei der vertikalen Zentrierung braucht CSS einen Bezugspunkt, z.B. eine Tabellenzelle. Wenn Du das Gleiche ohne Tabellen erreichen willst, kannst Du per span einem Leerzeichen im gleichen Absatz eine line-hight von der Höhe des Divs verpassen und dann hast Du auch ohne Tabelle einen Bezugspunkt, auf den sich die vertikale Zentrierung beziehen kann. Ideologisch kämest Du dann der reinen Lehre ein Stück näher *g*

      Nicht wirklich. Was soll '<span> </span>' denn für eine Auszeichnung sein?

      MI

      --
      : Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
      : Einführung in XHTML, CSS und Webdesign   http://jendryschik.de/wsdev/ :
      : Monatlich das Beste aus de.alt.netdigest http://best-of-netdigest.de/ :
    2. Hallo Mathias,

      bei der vertikalen Zentrierung braucht CSS einen Bezugspunkt, z.B. eine
      Tabellenzelle. Wenn Du das Gleiche ohne Tabellen erreichen willst, ...

      ... könnte man vielleicht daran denken, dem Mutterelement die Eigenschaft
      display:table-cell zu geben, wenn nicht, ja wenn nicht einige Browser damit
      Probleme zu haben scheinen. :-/

      http://www.tepasse.org/selfraum/text-der-sich-nicht-zwischen-oben-und-unten-entscheiden-kann.html

      • Tim
      --
      Ich weiß nie, was für eine Signatur ich nehmen sollte.
  4. Hallo Chräcker,

    (Ja, ich habe dem body und dem html-Bereich eine 100% Höhenvorstellung
    verordnet, und dann Divs und Tables um mein Wort gelegt, natürlich selbige
    margins mit auto versehen etc.... es mittet nicht bei mir....

    Ich habe mal irgendwo folgenden Hack mit "absolut-relativer" Positionierung
    gesehen und bei mir nach rumtesten gespeichert. Vielleicht hilft es Dir; ich
    habe bisher aber nur Mozilla, IE6 und Opera 7 (Beta irgendwas) getestet.

    http://www.tepasse.org/selfraum/unglaublich-tiefsinniges-zentriertes-wort-das-den-besucher-zum-verweilen-einladen-soll.html

    • Tim
    --
    Ich weiß nie, was für eine Signatur ich nehmen sollte.
    1. Hallo,

      auch nicht schlecht, vor allem, wenn man (wie in meinem fall) weiß, wie groß das zu zentrierende Feld ist....

      Danke,

      Chräcker

      1. Hi Cräcker,

        Nur ein kleiner Verbesserungs-Vorschlag:

        auch nicht schlecht, vor allem, wenn man (wie in meinem fall) weiß, wie groß das zu zentrierende Feld ist....

        Wenn es sich um Text handelt weisst Du das ja eben nicht (Mozilla z.B. zoomt auch bei "px"). Verwende bei margin, width und font-size daher lieber "em" statt "px", sonst zerschiesst es Dir die schöne Zentrierung.
        Dann ist die Schrifgrösse zwar auch im IE skalierbar, aber wenn Du genug Platz hast (was ich bei so einem Layout mal annehme) ists ja halb so schlimm.

        Nix für ungut + schöne Grüsse
        stefan

        --
                *
                |
            +---+---+
            | o   - |
            | [|||] |
          +-+-------+-+
          |           |
          |   10010   |
          |   00111   |
          |           |
          +-----------+
            ( )   ( )
            (_)   (_)
           [___] [___]
        1. Hallo,

          ne, ja, ne ;-) richtig natürlich, das war jetzt mißverständlich von mir. Bei meinem Projekt habe ich eine Grafik (genauer, ein Block aus 9 Grafiken), die ich zentriert haben möchte. Das "mit dem mittigen Wort" war nur ein Beispiel zur vereinfachung.... das dann natürlich bei Tims Methode Schwierigkeiten machen könnte...

          Chräcker