Ich hab ein div mit display:flex, damit ich den Inhalt vertikal und horizontal zentrieren kann.
Innerhalb dieses DIVs habe ich eine h1 und eine h2, die nun jedoch nebeneinander sind, weil das flex auf sie wirkt. Setze ich bei der h1 ein display:block, ändert das aber nichts. Auch ein br nach der h1 ändert nichts daran, auch nicht mit clear all.
Warum ist das so?
Ich habe zwar eine Möglichkeit gefunden, sie untereinander zu bringen, allerdings mit einem span statt h2 (im span ein display:table). Den Trick kann man hier nachlesen.
Das Problem mit einer background-color wie im Beispiel habe ich nicht, ich möchte einfach nur h1 und h2 wieder als Blockelement gestalten können.
Wie ich das jetzt gelöst habe, ist nämlich die zweite Zeile (also mein span innerhalb der h1) nicht zentriert unter der ersten, sondern sie sind gemeinsam zentriert in der Flexbox, aber linksbündig dargestellt.
.banner {
background:url("../images/colorsplash01b.jpg") no-repeat;
height:calc(100vh - 150px);
background-size:cover;
background-position:center;
background-attachment:scroll;
display:flex;
align-items:center;
justify-content:center;
}
.header {
background-color:rgba(255, 255, 255, 0.8);
height:80%;
width:74%;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}
.header h1 {
font-family:"Roboto Slab", serif;
font-size:;
font-weight:500;
}
.header h1 span {
display:table;
}