jquery는 li 태그를 가운데로 설정합니다.

jQuery를 사용하여 웹 페이지를 레이아웃하고 디자인할 때 때때로 목록 요소(li 태그)를 중앙에 배치해야 합니다. 다음은 jQuery를 사용하여 ff6d136ddc5fdfeffaf53ff6ee95f185 태그 아래에 25edfb22a4f469ecb59f1190150159c6 태그를 중앙에 배치하는 방법입니다.

방법 1: 플렉스 레이아웃을 사용하여 센터링 달성

플렉스 레이아웃은 CSS3의 새로운 레이아웃 방법으로, 센터링을 빠르게 달성할 수 있습니다.

먼저 CSS에서 ff6d136ddc5fdfeffaf53ff6ee95f185 태그의 스타일을 설정합니다.

ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

• display: flex;: ff6d136ddc5fdfeffaf53ff6ee95f185 태그를 flex 레이아웃으로 설정합니다.
• flex-wrap: Wrap;: 25edfb22a4f469ecb59f1190150159c6 태그 수가 한 줄을 초과하면 자동으로 줄 바꿈됩니다.
• justify-content: center;: 가로 가운데
• align-items: center;: 세로 가운데

이 때 ff6d136ddc5fdfeffaf53ff6ee95f185 아래의 25edfb22a4f469ecb59f1190150159c6 요소는 자동으로 가운데에 맞춰집니다.

방법 2: jQuery를 사용하여 오프셋을 계산하고 중앙에 배치합니다

어떤 경우에는 플렉스 레이아웃을 사용하지 못할 수도 있습니다. 이 경우 jQuery를 사용하여 25edfb22a4f469ecb59f1190150159c6를 중앙에 배치하는 오프셋을 계산할 수 있습니다.

먼저 ff6d136ddc5fdfeffaf53ff6ee95f185 및 25edfb22a4f469ecb59f1190150159c6 태그에 대해 다음 CSS 스타일을 설정해야 합니다. 포지셔닝.

위치: 절대;: 25edfb22a4f469ecb59f1190150159c6 태그의 위치 속성을 설정하여 절대 위치를 지정합니다. 이때 상위 요소(ff6d136ddc5fdfeffaf53ff6ee95f185)의 좌표에 따라 오프셋될 수 있습니다.
• left: 50%;: ff6d136ddc5fdfeffaf53ff6ee95f185 요소를 기준으로 25edfb22a4f469ecb59f1190150159c6 요소를 중앙에 배치합니다.
• transform:translateX(-50%);: 왼쪽: 50%는 25edfb22a4f469ecb59f1190150159c6 요소의 왼쪽을 ff6d136ddc5fdfeffaf53ff6ee95f185 요소의 중앙에 정렬합니다. 변환 속성을 사용하여 25edfb22a4f469ecb59f1190150159c6 요소를 왼쪽으로 50% 이동하여 완전히 중앙에 배치합니다.
• 이제 jQuery 코드를 사용하여 각 25edfb22a4f469ecb59f1190150159c6 태그에 필요한 오프셋을 계산합니다.

ul {
   position: relative;
}

li {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

$(window).on('load resize',function(){}); 페이지 로드 및 크기 조정 이벤트를 통해 화면 크기가 동적으로 변경될 때마다 25edfb22a4f469ecb59f1190150159c6 요소가 중앙에 유지될 수 있습니다.

var parentWidth = $('ul').width();: 상위 요소(ff6d136ddc5fdfeffaf53ff6ee95f185)의 너비를 가져옵니다.
• var childWidth = $(this).outerWidth();: 각 25edfb22a4f469ecb59f1190150159c6 요소의 너비를 가져옵니다.
• var leftOffset = (parentWidth - childWidth) / 2;: 상위 요소의 너비와 25edfb22a4f469ecb59f1190150159c6 요소의 너비를 기준으로 필요한 오프셋을 계산합니다.
• $(this).css('left', leftOffset + 'px');: 계산된 오프셋을 각 25edfb22a4f469ecb59f1190150159c6 요소의 왼쪽 속성에 적용합니다.
• 결론

위는 25edfb22a4f469ecb59f1190150159c6 태그를 중심으로 하는 두 가지 구현 방법입니다. 그 중 flex 레이아웃은 간단하고 빠르며 JavaScript를 사용할 필요가 없지만 호환성이 낮습니다. jQuery를 사용하여 오프셋을 계산하는 방법은 적용 범위가 더 넓지만 더 많은 코드와 계산이 필요합니다. 이는 jQuery를 사용하여 센터링을 구현하는 훌륭한 예일 뿐입니다.

위 내용은 jquery는 li 태그를 가운데로 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!