Un problema che si presenta spesso nello sviluppo di layout web, è quello di centrare verticalmente un certo elemento. Nel caso di un elemento caratterizzato da una sola riga di testo, la soluzione è semplice:

.centerVertically {
height: 100px;
line-height: 100px;
vertical-align: middle;
}
Oppure, impostando position: relative; sul parent dell'elemento, possiamo usare:
.centerVertically {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
Entrambi i casi sono applicabili solo quando si conosce l'altezza dell'elemento a priori. Differentemente possiamo farci aiutare dal metodo height() di jQuery:

function centerVertically(elements) {
    elements.each(function() {
        $(this).css('margin-top', '-' + $(this).height() / 2 + 'px');
    });
}

var elements = $('.centerVertically');
$(window).load(centerVertically(elements));
E' importante leggere l'altezza nell'evento "window.load", "document.ready" non è sufficente e ritornerebbe 0.
CSS , jQuery
0 commenti
comments powered by Disqus