Schrift mit transparentem Hintergrund über die volle Breite des Bildes.

[Rolf B]

Hallo Fabi21001,

Ich habe ein kleines Problem

Böse Zungen würden sagen: Du hast ein großes Problem. Du hast Dich an Selfhtml gewendet und präsentierst ein HTML mit DIV-Suppe. Uiuiui, wie kannst Du nur. Nun wird Dich jeder verbessern wollen. Ich auch.

Nein, Spaß. Erstmal nur kompakt das, was Du wissen möchtest:

Dein .centered Element ist genau das: horizontal und vertikal zentriert. Nach deiner Beschreibung willst Du es auch wirklich vertikal zentrieren, aber horizontal über die ganze Breite gehen lassen und nur den Textinhalt zentrieren.

Dafür musst Du das ".centered" Element auf left:0 und width:100% setzen, und die horizontale Transformation unterlassen (ersten Parameter von translate() auf 0 setzen). Das p Element ist nicht nötig; Farbe und Fontsize kannst Du auch auf dem .centered div setzen und den Text darin mit text-align zentrieren. Die Ränder des p Elements kannst Du durch padding-top und padding-bottom des .centered Elements ersetzen. Bei mir in Chrome ist das 1em, also 40px bei font-size:40px. Finde ich sehr reichlich, 0.5em sollte reichen.

Nun die self-typischen Verbesserungstipps. Nimm sie oder kloppe sie in die Tonne.

Abmessungen aller Art gibt man nach aller Möglichkeit nicht fix in Pixeln an, sondern relativ. Je nach den Umständen relativ zum Font des Elements (in Prozent oder in em) oder relativ zum Font des Root-Elements vom Dokument (in rem). Die Default-Fontsize vieler Browser ist 16px. Das ist aber nicht in Stein gehauen, sondern dient jetzt nur als Grundlage der Umrechnung. Dein Container hat font-size: 30px. Mit 1.9rem oder 2rem wärest Du also recht gut bedient. Deine Bildbeschriftung hat 40px. Die solltest Du relativ zum Container wählen, das wären bei 2rem im Container 125% für die Beschriftung. Damit kommst Du - sofern der User nicht eingreift - bei den gleichen Werten wie vorher heraus. Aber wenn ein User die Größe der Textdarstellung im Browser verändert, dann skalieren deine Schriften nun mit. Wenn Du sie in px angibst, tun sie es nicht.

Zweitens möchte ich Dir vorschlagen, dein Markup semantischer zu gestalten. Es gibt für solche Zwecke die Elemente figure und figcaption. Ein Klassenname sollte auch nicht ein Layout beschreiben, sondern darstellen, welche Art von Inhalt in den Elementen mit dieser Klasse ist. Im Stylesheet formulierst Du dann, welche Inhalte wie aussehen sollen. Dass die Überschrift in einer Illustration zentriert sein soll, ist eine Info, die nicht ins HTML gehört. Darum ist der Klassenname "centered" falsch. Die figcaption braucht aber auch keine Klasse - wenn du die Caption in einer figure zentrieren willst, kannst Du sie mit passenden CSS Selektoren auch ohne Klasse ansprechen. Schau mal hier, was Kombinatoren sind.

Ich kenne deine Seite nicht und kann daher erstmal nur den generischen Klassennamen "illustration" vorschlagen. Wenn Du alle <figure> Elemente innerhalb der Seite (oder innerhalb eines Teils der Seite) gleich gestalten willst, kannst Du auf die Klasse auch ganz verzichten. Das kommt ganz auf deine Inhalte an. Ich bleibe erstmal bei class="illustration".

<figure class="illustration">
   <img src="kabel.jpg" alt="Kabel">
   <figCaption>Kabel</figCaption>
</figure>

Das width-Attribut am <img> Element verlege ich ins CSS, und ein p in der Caption ist unnötig.

.illustration {
  position: relative;
  font-size: 2rem;
  margin: 0;                /* figure bringt margin mit */
}
.illustration img {
  width: 100%;               /* Bild soll die Illu ausfüllen */
}
.illustration figCaption {
  position: absolute;
  top: 50%; left: 0%; width:100%;
  transform: translate(0%, -50%);
  background-color: rgba(85,85,85,0.55);
  font-size: 125%;
  color: white;
  text-align: center;
}

Statt absolut zu positionieren, kann man auch Grid-Layout verwenden (Infos dazu im Self-Wiki). Das unterteilt einen Container in ein Raster, und man kann jedes Kind frei in Rasterzellen positionieren. Und man kann angeben, ob der Inhalt oben, unten oder in der Mitte landen soll. Mit einem ein-mal-ein Grid sähe es so aus:

.illustration {
  margin: 0;
  font-size: 2rem;
  display: grid;
  grid-template: "illu" auto  /* Eine Zelle, Höhe auto */
                / 1fr;        /* und volle Breite */
  align-items: center;        /* Zellinhalt vertikal zentrieren */
}
.illustration img {
  grid-area: illu;             /* Bild in die "illu" Zelle */
  width: 100%;
}
.illustration figCaption {
  grid-area: illu;            /* Caption auch in die "illu" Zelle */
  background-color: rgba(85,85,85,0.55);
  padding: 0.5em 0;
  font-size: 125%;
  color: white;
  text-align: center;
}

Die "auto" Höhenangabe für die "illu" Zelle sorgt dafür, dass die Höhe der Abbildung durch die Abmessungen des Bildes bestimmt wird. Vorsicht bei Hochkantbildern, das könnte dann riesig werden.

Rolf