Wie Krieg ich den Text mit HTML/Css in die Mitte des Bildes?

Aktuell hab ich den Text ganz oben,will in aber in die Mitte des Bildes bekommen.

Hier der bisherige Programm-Code:

Mache das ganze Übrigens für die Schule,morgen ist Abgabe einer Website,die ich selber erstellen muss/soll.Gebt mir da sonst noch gerne Tipps!

VG

Answer 1

[Mirko Marek]

Hi Suchhilfe95,

auch wenn ein bischen zu spät ist, gebe ich dir trotzdem eine passende Antwort. Du kannst mithilfe von Flexbox den Inhalt sowohl horizontal als auch vertikal ausrichten.

So könnte das aussehen:

.title {
color: orangered;
background-image: url('deinePfadzumBild...jpg');
width: 100%;
height: 600px;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify: center;
}

;-)

Woher ich das weiß: Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Comments

[Suchhilfe95]

Merk ich mir für die Zukunft.Eine Frage noch:Brauchst du HTML und CSS in deinem Berufsalltag hin und wieder noch?

[Mirko Marek]

@Suchhilfe95

Ja, jeden Tag. Ich muss Webtechnologien wie HTML, CSS, JavaScript, PHP und SQL arbeiten.

Answer 2

[regex9]

Du kannst die Zeilenhöhe auf dieselbe Höhe wie die des Elements setzen.

line-height: 600px;

Das style-Element gehört übrigens in den head-Knoten, nicht in body. Des Weiteren würde ich empfehlen, den Code einheitlich einzurücken.

Comments

[Suchhilfe95]

Bei Line-heigt ist in meiner Live-Ansicht dann auf einmal das Bild weg.Deine anderen Tipps hab ich umgesetzt,Danke!

[regex9]

@Suchhilfe95

Beispiel: https://jsfiddle.net/7jwu8mz0/

Es gibt aber noch andere Methoden. Zum Beispiel kann man den Inhalt via Flexbox zentrieren: https://jsfiddle.net/7jwu8mz0/1/

Answer 3

[Miclas]

Versuche es mal mit

vertical-align:middle;
"display: table;" oder "display: table-cell;"