Vertical Centering in CSS

Bild von xDest
3 Stimmen

Man kennt das Problem: Man benutzt ein DIV-basiertes Layout, muss aber die Inhalte nicht nur horizontal, sondern auch vertikal ausrichten. Das CSS-Statement vertical-align verstehen die wenigsten Browser und funktioniert auch nicht auf DIV-Container. Die Lösung:

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html