> 웹 프론트엔드 > JS 튜토리얼 > jQuery를 사용하여 DIV를 화면 중앙에 어떻게 배치할 수 있나요?

jQuery를 사용하여 DIV를 화면 중앙에 어떻게 배치할 수 있나요?

Susan Sarandon
풀어 주다: 2024-12-07 17:17:13
원래의
530명이 탐색했습니다.

How Can I Center a DIV on the Screen Using jQuery?

jQuery를 사용하여 화면 중앙에 DIV

웹을 만들 때 HTML 요소를 화면 중앙에 배치하는 것은 일반적인 작업일 수 있습니다. 응용 프로그램. 이 기사에서는 이 기능을 효과적으로 구현하기 위해 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 요소를 쉽게 중앙에 배치할 수 있습니다.

$(element).center();
로그인 후 복사

이렇게 하면 요소를 화면의 수직 및 수평 중앙에 정확하게 배치합니다.

추가 참고:

이 함수에는 수직 오프셋을 조정하는 매개변수도 포함되어 있습니다. 예를 들어 요소를 위에서 50픽셀 중앙에 배치하려면 다음을 사용합니다.

$(element).center({top: -50});
로그인 후 복사

위 내용은 jQuery를 사용하여 DIV를 화면 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿