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

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

태그 아래에
• 태그를 중앙에 배치하는 방법입니다.

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

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

  먼저 CSS에서

  태그의 스타일을 설정합니다.

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

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

    이 때

    아래의
    • 요소는 자동으로 가운데에 맞춰집니다.

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

      어떤 경우에는 플렉스 레이아웃을 사용하지 못할 수도 있습니다. 이 경우 jQuery를 사용하여

    • 를 중앙에 배치하는 오프셋을 계산할 수 있습니다.

      먼저

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

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

            $(window).on('load resize',function(){}); 페이지 로드 및 크기 조정 이벤트를 통해 화면 크기가 동적으로 변경될 때마다

            • 요소가 중앙에 유지될 수 있습니다.
              var parentWidth = $('ul').width();: 상위 요소(
              )의 너비를 가져옵니다.
              • var childWidth = $(this).outerWidth();: 각
              • 요소의 너비를 가져옵니다.
              • var leftOffset = (parentWidth - childWidth) / 2;: 상위 요소의 너비와
              • 요소의 너비를 기준으로 필요한 오프셋을 계산합니다.
              • $(this).css('left', leftOffset + 'px');: 계산된 오프셋을 각
              • 요소의 왼쪽 속성에 적용합니다.
              • 결론
              위는
              • 태그를 중심으로 하는 두 가지 구현 방법입니다. 그 중 flex 레이아웃은 간단하고 빠르며 JavaScript를 사용할 필요가 없지만 호환성이 낮습니다. jQuery를 사용하여 오프셋을 계산하는 방법은 적용 범위가 더 넓지만 더 많은 코드와 계산이 필요합니다. 이는 jQuery를 사용하여 센터링을 구현하는 훌륭한 예일 뿐입니다.

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