Im Folgenden wird gezeigt, wie man Texte, divs, iframes und YouTube-Videos horizontal zentriert in seine Website einbetten kann. Sämtliche Codes samt Anwendungsbeispielen können Sie hier downloaden:
1) Zentrieren mit: max-width: fit-content / margin-left: auto / margin-right: auto
CSS:
.zentrierung-1 {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
HTML:
<div class="zentrierung-1">
<span>Zentrierter Text</span>
</div>
2) Zentrieren mit: max-width: fit-content / margin-inline: auto
CSS:
.zentrierung-2 {
max-width: fit-content;
margin-inline: auto;
}
HTML:
<div class="zentrierung-2">
<span>Zentrierter Text</span>
</div>
3) Zentrieren mit: display: flex / justify-content: center / align-items: center
CSS:
.zentrierung-3 {
display: flex;
justify-content: center;
align-items: center;
}
HTML:
<div class="zentrierung-3">
<span>Zentrierter Text</span>
</div>
4) Zentrieren mit: display: grid /place-content: center
CSS:
.zentrierung-4 {
display: grid;
place-content: center;
}
HTML:
<div class="zentrierung-4">
<span>Zentrierter Text</span>
</div>
5) Zentrieren mit: text-align: center
CSS:
.zentrierung-5 {
text-align: center;
}
HTML:
<div class="zentrierung-5">
<span>Zentrierter Text</span>
</div>
6) Zentrieren mit: position: absolute / transform: translateX
CSS:
.zentrierung-6 {
position: relative;
margin-top: 40px;
height: 50px;
}
.absolute-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
HTML:
<div class="zentrierung-6">
<div class="absolute-center">
Zentrierter Text
</div>
</div>
7) Bild zentrieren mit: display: block / margin-left: auto / margin-right: auto (Hinweis: in der HTML-Sektion muss statt bild.jpg das jeweils einzubettende Bild bestimmt werden)
CSS:
img.zentrierung-7 {
display: block;
margin-left: auto;
margin-right: auto;
}
HTML:
<img class="zentrierung-7" src="bild.jpg" alt="Bild">
8) Iframe zentrieren mit: display: block / margin: 0 auto (Hinweis: in der HTML-Sektion muss statt „https://eingebundene-website.com/“ die URL der einzubettenden Website angegeben werden)
CSS:
iframe.zentrierung-8 {
display: block;
margin: 0 auto;
width: 60%;
}
HTML:
<iframe class="zentrierung-8" src="https://eingebundene-website.com/"></iframe>
9) YouTube-Video zentrieren mit: display: flex / justify-content: center / align-items: center (Hinweis: in der HTML-Sektion muss nach /embed die jeweilige ID des YouTube-Videos bestimmt werden; diese wird angezeigt, wenn man auf YouTube beim einzubindenden Video auf Teilen > Einbetten klickt)
CSS:
.youtube-zentrierung-9 {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
}
.youtube-container {
width: 60%;
aspect-ratio: 16 / 9;
}
HTML:
<div class="youtube-zentrierung-9">
<div class="youtube-container">
<iframe
src="https://www.youtube.com/embed/ID"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="width: 100%; height: 100%;">
</iframe>
</div>
</div>