Text vertikal zentrieren
Shin
- css
0 Gunnar Bittersmann0 Shin
0 apsel0 Axel Richter0 apsel
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!
@@Shin:
nuqneH
Ich habe schon das halbe Internet abgesucht
Die auf der Startseite des Forums verlinkten FAQ hast du übersehen?
Qapla'
@@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.
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
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?
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
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
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