Shin: Text vertikal zentrieren

Hallo,

Ich habe einfach eine blanke Seite, auf der ich Text (bestehend aus nur 2-3 Zeichen) horizontal und vertikal zentrieren möchte. Letzteres ist hier das Problem.
Ich habe schon das halbe Internet abgesucht, aber keines der gefundenen Beispiele hat mir wirklich geholfen, oder vielleicht war ich auch zu unfähig es umzusetzen.
Könnte mir hier jemand helfen, bzw. mich auf ein entsprechendes Beispiel verweisen?

Danke schon jetzt!

  1. @@Shin:

    nuqneH

    Ich habe schon das halbe Internet abgesucht

    Die auf der Startseite des Forums verlinkten FAQ hast du übersehen?

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@Shin:

      nuqneH

      Ich habe schon das halbe Internet abgesucht

      Die auf der Startseite des Forums verlinkten FAQ hast du übersehen?

      Qapla'

      Habe ich tatsächlich, ja. Allerdings hilft das dortige Beispiel auch nicht wirklich, da die Zeichen nicht genau zentriert werden. Außerdem schieben sie sich immer weiter nach links oben aus dem Bildschirm, je größer ich die Schriftgröße einstelle.

  2. Om nah hoo pez nyeetz, Shin!

    das einfachste ist, den Text in ein p-Element setzen und diesem margin: 50%; geben, wenn wirklich nur "123" in etwa der Mitte der Seite stehen soll. Eine bessere Lösung ist bei suit zu finden

    Matthias

    --
    http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. Om nah hoo pez nyeetz, Shin!

      das einfachste ist, den Text in ein p-Element setzen und diesem margin: 50%; geben, wenn wirklich nur "123" *in etwa* der Mitte der Seite stehen soll. Eine bessere Lösung ist bei suit zu finden

      Matthias

      Ich habe jetzt einmal dieses Beispiel ausprobiert, aber es passiert das gleiche wie bei dem Beispiel unter der Selfhtml FAQ. Sobald ich die Schriftgröße ändere, verschiebt sich der Text irgendwohin. Was könnte dafür das Problem sein?

      1. Om nah hoo pez nyeetz, Shin!

        Ich habe jetzt einmal dieses Beispiel ausprobiert, aber es passiert das gleiche wie bei dem Beispiel unter der Selfhtml FAQ. Sobald ich die Schriftgröße ändere, verschiebt sich der Text irgendwohin. Was könnte dafür das Problem sein?

        Wahrscheinlich meinst du den Browserzoom. Dann wird natürlich die ganze Seite größer.

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
  3. Hallo,

    Ich habe einfach eine blanke Seite, auf der ich Text (bestehend aus nur 2-3 Zeichen) horizontal und vertikal zentrieren möchte. Letzteres ist hier das Problem.
    Ich habe schon das halbe Internet abgesucht, aber keines der gefundenen Beispiele hat mir wirklich geholfen, oder vielleicht war ich auch zu unfähig es umzusetzen.
    Könnte mir hier jemand helfen, bzw. mich auf ein entsprechendes Beispiel verweisen?

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
            "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <title>mehrzeiliger Text Mitte Mitte</title>  
    <style type="text/css">  
    html {display:table; margin:0; padding:0; width:100%; height:100%;}  
    body {display:table-cell; margin:0; padding:0; width:100%; height:100%; vertical-align:middle;}  
    .splashscreen {display:table; width:40ex; height:10em; margin:0 auto; background-color:yellow;}  
    .splashscreen p {display:table-cell; height:100%; text-align:center; vertical-align:middle;}  
    </style>  
    </head>  
    <body>  
    <div class="splashscreen">  
    <p>Text Mitte Mitte<br>mit mehreren Zeilen;<br> wirklich mit mehreren Zeilen</p>  
    </div>  
    </body>  
    </html>  
    
    

    viele Grüße

    Axel

    1. Om nah hoo pez nyeetz, Axel Richter!

      
      
      
      > html {display:table; margin:0; padding:0; width:100%; height:100%;}
      > body {display:table-cell; margin:0; padding:0; width:100%; height:100%; vertical-align:middle;}
      
      zusätzlich [code lang=html]html {text-align: center;}
      

      und du kannst auf

      .splashscreen {display:table; width:40ex; height:10em; margin:0 auto; background-color:yellow;} .splashscreen p {display:table-cell; height:100%; text-align:center; vertical-align:middle;}

      verzichten.

      Matthias

      --
      http://www.billiger-im-urlaub.de/kreis_sw.gif