Ein altes Problem von HTML und CSS ist die mangelnde Möglichkeit ein DIV vertikal zu zentrieren ohne negative Werte oder eine Tabelle zu nutzen. Eine Lösung sah so aus, dass die zu zentrierende Box feste Abmessungen bekommt, sie absolut positioniert, von den Rändern 50% entfernt wird und um den halbierten negativen Wert der eigenen Abmessungen zurück geschoben wird. Dies führt jedoch dazu, dass wenn der Viewport zu klein wird, ein Teil der Box aus dem Viewport verschwindet. Um dies schnell und einfach zu lösen, kann einfach Javascript, bzw. in diesem Fall jQuery genutzt werden:
$(function (){
function valign(wrapper) {
var windowHeight = $(window).height();
var wrapperHeight = $(wrapper).height();
var space = windowHeight-wrapperHeight;

if(windowHeight > wrapperHeight) {
$(wrapper).css({
top: space / 2,
position: 'relative'
});
}
}

valign('#center');
$(window).resize(function (){
valign('#center');
});
});
Dieses Script fragt den Viewport des Browsers ab, berechnet die Differenz zur Höhe des Box Elementes, um es anschließend zu halbieren und somit den oberen und oberen Abstand zum Rand zu erhalten. Als letztes wird dann mittels jQuery der Abstand des Elementes zum oberen Rand übermittelt und die position auf relative gesetzt. jQuery errechnet so dynamisch wie viel Abstand es nach oben Braucht um vertikal zentriert zu sein.

Neuen Kommentar schreiben