Wer einen Text über einem Bild zentrieren will, kann dies auf verschiedene Weise bewerkstelligen. Im Folgenden werden drei Lösungen vorgestellt:
- CSS-Grid
- Absolute Positionierung und CSS-Transformationen
- Flexbox
Die für die folgende Demo verwendeten Codes samt Bildern können Sie hier downloaden:
Im Stylesheet der Datei index.html werden für drei sections die jeweils erforderlichen CSS-Codes festgelegt. Für die erste section (sec-1) werden die benötigten Grid-Styleelemente definiert, für die zweite section (sec-2) die notwendigen Positionierungs- und Transformations-Codes und für die dritte section (sec-3) die gebotenen Flexbox-Styles.
In der index.html werden drei sections festgelegt und jeder dieser sections die für sie geltenden Styles zugeordnet.
Anschließend wird präsentiert, wie der Webcode optisch aussieht.
CSS-Code
/*
################
Methode 1: Grid
################
*/
.sec-1 {
display: grid;
place-items: center; /* Zentriert sowohl horizontal als auch vertikal */
max-width: 50%;
/* Bild mittig
margin-left: auto;
margin-right: auto;
*/
margin-bottom: 30px;
}
.sec-1 img {
grid-area: 1 / 1; /* Legt das Bild in die erste Zelle */
width: 100%;
}
.text-overlay-sec-1 {
grid-area: 1 / 1; /* Legt den Text in dieselbe Zelle wie das Bild */
z-index: 1; /* Stellt sicher, dass der Text über dem Bild liegt */
color: white;
text-align: center;
font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
}
/*
################
Methode 2: Absolute Positionierung und CSS-Transformationen
################
*/
.sec-2 {
position: relative;
display: block; /* oder 'block' je nach Bedarf */
max-width: 50%;
margin-bottom: 30px;
/* Bild mittig
margin-left: auto;
margin-right: auto;
*/
}
.sec-2 img {
display: block;
width: 100%; /* oder eine feste Breite */
height: auto;
}
.text-overlay-sec-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* Textfarbe */
font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
text-align: center;
}
/*
################
Methode 3: Flexbox
################
*/
.sec-3 {
display: flex;
max-width: 50%;
}
.sec-3 img {
width: 100%;
}
figure {
position: relative;
margin: 0;
padding: 0;
}
span {
display: flex;
align-items: center;
justify-content: center;
text-align:center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
color: #fff;
}
/*
################
Media Queries
################
*/
@media screen and (max-width: 768px) {
.sec-1, .sec-2, .sec-3 {
max-width: 100%;
}
}
HTML-Code
<section class="sec-1">
<img src="stadt-1.jpg" alt="Stadt">
<div class="text-overlay-sec-1">Lorem ipsum dolor sit amet, consetetur<br>
sadipscing elitr, sed diam nonumy eirmod</div>
</section>
<section class="sec-2">
<img src="stadt-2.jpg" alt="Stadt">
<div class="text-overlay-sec-2">Lorem ipsum dolor sit amet, consetetur<br>
sadipscing elitr, sed diam nonumy eirmod</div>
</section>
<section class="sec-3">
<figure>
<img src="stadt-3.jpg" alt="Stadt">
<span>Lorem ipsum dolor sit amet, consetetur<br>
elitr, sed diam nonumy eirmod</span>
</figure>
</section>
Visuelle Darstellung der Webcodes
CSS-Grid:
Absolute Positionierung und CSS-Transformationen
Flexbox
