Vertikal zentrierter Text an der Spitze des Bildes - html, css

Wie zentriert man einen Text in der Mitte eines Banner-Containers mit Bild-Tag?

Mein Suchergebnis verwendet Anzeige: Tabelle / Anzeige:Tabellenzelle oder Anzeige: Inline-Block, aber diese Lösung funktionierte nicht, wenn wir ein Bild-Tag haben. Ich denke, ich muss eine absolute Position für Text haben, aber wie kann ich dann sicherstellen, dass er bei der Größenänderung des Fensters immer vertikal und horizontal zentriert ist?

Hier ist HTML:

<div class="banner">
<img class="" src="/images/http://placehold.it/1440x410">
<div class="container">
<div class="banner-text">
<h1>Header Text</h1>
<h3>Sub Header Text</h3>
<a href="#"> CTA</a>
</div>
</div>
</div>

und Css wie folgt:

.banner{
width: 100%;
position: relative;
}

.banner img{
width: 100%;
}

.container{
margin-left: auto;
margin-right: auto;
width: 100%;
}

.banner-text{
position: absolute;
top: 50%;
left: 50%;
}

http://codepen.io/neginbasiri/pen/grEmMx

Ich frage mich, was ist Ihre Lösung dafür?

Vielen Dank

Antworten:

Fügen Sie diese Transformation einfach der hier aufgelisteten Klasse hinzu:

.banner-text{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); /* or of course - translate(-50%, -50%); */
}

Gabel Demo

Weitere Informationen finden Sie in diesem Handbuch: Zentrieren in CSS

Der prägnanteste Weg, um das zu tun, was Sie brauchen, ist folgender:

.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* add me */
}