HTML / CSS: Wie kann ich einen Text horizontal zentrieren?
Wie kann ich einen Text in die Mitte bringen?
So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<style>
body {
background-image: url("bild.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
overflow: hidden;
}
h1 {
color: white;
font-family: Geneva, Verdana, sans-serif;
font-size: 200px;
text-align: center;
/*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
padding-top: 38vh;
padding-bottom: 70vh;
}
h1 {
/*animation-name: titel;
animation-duration: 6s;
animation-delay: 6s;
animation-fill-mode: forwards;*/
animation: titel 6s 6s forwards
}
@keyframes titel {
from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
}
p {
color: aliceblue
}
</style>
<script src="script.js"></script>
</head>
<body>
<h1>TITEL</h1>
<p>Test-Text</p>
</body>
</html>
2 Antworten
Die Überschrift in deinem Beispiel wird in jedem Fall horizontal zentriert, denn das h1-Element übernimmt die volle Breite des Bildschirms und du hast das text-align-Property verwendet.
Für eine horizontale und vertikale Zentrierung hingegen würde ich die Überschrift in einem Flexcontainer ausrichten.
CSS:
.stage {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}
HTML:
<!-- ... -->
<section class="stage">
<h1>Titel</h1>
</section>
<!-- ... -->
Und gibt es eine Möglichkeit sicherzustellen das das Bild zuvor geladen hat?
Du kannst das Bild mit JavaScript laden und dann für den Container setzen. Das öffnet dir gleichzeitig eine Schnittstelle, um herauszufinden, ob das Bild bereits geladen wurde.
const imageContainer = document.querySelector("...");
const image = document.createElement("img");
const imageUrl = "...";
image.addEventListener("load", () => {
imageContainer.style.backgroundImage = `url('${imageUrl}')`;
// do something else ...
image = null; // image element can be removed
});
image.src = imageUrl;
Allerdings wartet ein Nutzer gewöhnlicherweise nicht ab, bis alle Bilder geladen wurden. Er scrollt entweder weiter, auf der Suche nach sichtbarem Text oder verliert gänzlich das Interesse und verlässt die Seite wieder.
Daher würde ich eher empfehlen, eine Hintergrundfarbe (background-color) als Fallback zu setzen. Die wird vom Bild, sobald es geladen wurde, automatisch überdeckt.
Des Weiteren kannst du den Ladeprozess beschleunigen, indem du für bestimmte Bildschirmauflösungen (z.B. mobile Portrait, mobile Landscape, Desktop, ...) unterschiedliche Bildgrößen zur Verfügung stellst. Beschäftige dich dafür mit Image Sets.
In deinem HTML-Code hast du bereits den Text in der Mitte positioniert, indem du die
padding-topund
padding-bottomEigenschaften für das
<h1>Element verwendet hast. Es sieht so aus, als ob der Text mit den angegebenen Padding-Werten in der Mitte des Bildschirms positioniert wird.
Allerdings funktioniert das möglicherweise nicht für alle Bildschirmgrößen oder Geräte, da du feste Einheiten (vh - Viewport Height) für das Padding verwendet hast. Das bedeutet, dass der Text an einem größeren Bildschirm anders positioniert sein kann als auf einem kleineren Bildschirm.
Um sicherzustellen, dass der Text immer in der Mitte bleibt, unabhängig von der Bildschirmgröße, könntest du flexibles Layout verwenden und die
display: flex;Eigenschaft für den
<body>-Tag setzen. Dann geht
align-items: center;und
justify-content: center;