Absolutes div, flexibel vertikal zentrieren?

html.de-Forum HTML, XHTML & CSS
1

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

2

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;
}

3

Funktioniert das dann auch wenn das element absolut positioniert ist?

4

Nein, auf absolute Positionierung sollte man i.d.R. auch verzichten.

5

Ja ich weis aber mir geht es ja nur um den hintergrund(hover) effekt der spitze

6

Dann mach das doch mit einer Hintergrundgrafik?!

7

Dachte ich auch schon aber ein transparentes png mit ausmaßen von ca 700px x 700px ist ja auch schon mal knapp 30kb groß.

8

Versuch’s mal so

<!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>