jQuery를 사용하여 웹 페이지에서 DIV 요소를 중앙에 배치하려면 어떻게 해야 합니까?

jQuery를 사용하여 웹 페이지 중앙에 DIV 배치

DIV 요소를 화면 중앙에 배치하는 것은 웹 개발의 일반적인 요구 사항입니다. . jQuery는 이를 달성하기 위한 편리한 솔루션을 제공합니다.

해결책:

jQuery를 사용하여 DIV를 중앙에 배치하려면 다음 기능을 활용할 수 있습니다.

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

이 함수는 화면 크기와 DIV의 위치를 ​​기준으로 중심 좌표를 계산하여 DIV의 위치를 ​​수정합니다. Dimensions.

사용법:

함수가 jQuery에 추가되면 다음 구문을 사용하여 대상 DIV에서 간단히 호출할 수 있습니다.

$(element).center();

이렇게 하면 DIV가 screen.

데모:

이 기능을 시연하려면 센터링 정밀도를 제어하는 ​​추가 매개변수가 포함된 다음 Fiddle을 참조하세요.

[Fiddle Link]

이 jQuery 기능을 활용하면 모든 DIV 요소를 웹 중앙에 쉽게 배치할 수 있습니다. 페이지.

위 내용은 jQuery를 사용하여 웹 페이지에서 DIV 요소를 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!