• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

vertikal zentrieren bei responsive layout

B

burn4ever

Mitglied
Hallo
ich habe einen Kontainer welcher absolut positioniert ist und zwei p-tags mit unterschiedlichen Klassen beinhaltet.
HTML: 
<span class="container">
                                <p class="teaser-headline">News 2014</p>
                                <p class="teaser-subline">Aktuelles und Brandneu</p>
                            </span>
mein bisheriges css für "container" sieht bisher so aus.
Code: 
position: absolute;
z-index: 1;
text-align: center;
margin: auto;
width: 100%;
top: 40%;
left: 0;
Das Elternelement von "container" ist ein div mit einer Grafik welches width 100% hat, da responsive.

Momentan habe ich das Problem das wenn ich den Browser kleiner ziehe der Text nicht mehr vertikal zentriert ist sobald dieser umbricht, sprich 2 oder 3zeilig wird.

Hat jemand einen Idee wie ich den Text vertikal zentrieren kann?
 
Lösche das position: absolute und ersetze top durch margin-top. Für die unterschiedlichen Auflösungen kannst du den Wert für margin-top dann per Media Queries anpassen.
 
Hmm,
aber das löst noch nicht das Problem wirklich. Der Text soll dynamisch gepflegt werden.
Sprich es kann sein das für den angepassten Breakpoint wo ich nur eine Zeile Text habe, ein neuer Text eingesetzt wird welcher z.B. 2 oder 3 hat. Auch dann wird der Text nicht mehr vertikal zentriert.

Ich versuche das ganze schon via tabel und table-cell zu lösen:
http://css-tricks.com/vertically-center-multi-lined-text/

Mein Problem ist aber das ich nicht, wie im Beispiel, mit festen Kontainerhöhen arbeiten kann, da responsive.
 
Ich glaube die einfachste Lösung ist hier padding.
Beispiel:
Wenn deine Box eine Mindesthöhe von ca. 100px haben soll, dann kannst du deiner Box ein oberen und unteren padding von 40px geben. Rechnet man nun die Schriftgröße hinzu, so sind es ca. 100px. Somit ist es doch vertikal zentriert. Oder bin ich auf den falschen Dampfer?
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vertical zentrieren bei dynamischer Breite und Höhe mit CSS padding</title>
<style>
* {
margin:0;
padding:0;
}

.vertical {
padding:40px 0px;
width:100%;
background:#eed;
text-align:center;
}

.vertical p {
padding:0 30px;
}

</style>
</head>
<body>
<div class="vertical">
<p>Das ist ein vertikal zentrierter Text Das ist ein vertikal zentrierter Text</p>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben