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

Absolutes div, flexibel vertikal zentrieren?

Fr3ddy

Mitglied
Hi,

das div mit der klasse "fill_bottom" soll vertikal zentriert sein und das flexibel, da die höhe zwischen 140px und 300px des eltern divs variiren kann.
Im chrome funktioniert es leider nicht im firefox, ich denke es liegt daran, dass das div "fill_bottom" größer ist als das eltern element und firefox interpretiert es dann anders.

Kann mir da jmd helfen das das div im firefox genau so ausschaut wie im chrome?

http://jsfiddle.net/mfwvhnh2/

Danke
 
Werbung:
Standardmäßig kann man divs nicht vertikal zentrieren. Das geht nur mit Tabellen-Zellen oder Elementen, die die Eigenschaft display: table-cell; bekommen haben:

.ce_text.forward {
display: table-cell;
vertical-align: middle;
}
 
Werbung:
Werbung:
Dachte ich auch schon aber ein transparentes png mit ausmaßen von ca 700px x 700px ist ja auch schon mal knapp 30kb groß.
 
Versuch's mal so
Code:
<!DOCTYPE html>
<html
><head>
<meta charset=utf-8>
<title>Vertikal zentrieren mit :after oder :before</title>
<style>
* {
 margin:0;
 padding:0;
}

div {
 text-align:center;
 background:#eee;
 height:300px;
}

div:before {
 content:"";
 display:inline-block;
 height:100%;
 vertical-align:middle;
}
span {
 display:inline-block;
 vertical-align:middle;
 padding:20px;
 height:auto;
 background:#dad;
}
</style>
</head>

<body>
<div>
 <span>Pseudobild</span>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Zurück
Oben