Главная >
Блог > JavaScript framework > Горизонтальное и вертикальное центрирование на jQuery
{Горизонтальное и вертикальное центрирование на jQuery }
При верстке сайтов существует необходимость отцентрировать блок, по горизонтали и вертикали. Существует несколько путей решения. В статье расскажем как это реализовать с помощью jQuery.
$(window).resize(), выполняется при изменении размеров окна. Используем outerWidth() и outerHeight(), так как в отличие от типичных width() и height(), они добавляют значение padding и ширину border к возвращаемому размеру. В конце, вызываем событие изменение размеров окна, чтобы установить .content_in точно по центру на странице.
Script
<script type="text/javascript">
$(document).ready(function() {$('.content_in').css({position:'relative',top: ($('body').height() - $('.content_in').outerHeight())/2
});});
$(window).resize(function(){$('.content_in').css({position:'relative',top: ($('body').height() - $('.content_in').outerHeight())/2
});});
$(window).resize();
</script>
$(document).ready(function() {$('.content_in').css({position:'relative',top: ($('body').height() - $('.content_in').outerHeight())/2
});});
$(window).resize(function(){$('.content_in').css({position:'relative',top: ($('body').height() - $('.content_in').outerHeight())/2
});});
$(window).resize();
</script>
Преимущество использования этого метода заключается в том, что нет необходимости знать размеры блоков.
Комментарии:
НАША 