> 웹 프론트엔드 > CSS 튜토리얼 > 고정 너비 Div 내에서 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

고정 너비 Div 내에서 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-12-02 22:50:15
원래의
965명이 탐색했습니다.

How to Center an Unordered List within a Fixed-Width Div?

  • 를 사용하여 순서가 지정되지 않은 목록(
      )을 중앙에 배치합니다. 고정 너비 Div의 요소
  • 이 시나리오에는

  • 를 포함하는 순서가 지정되지 않은 목록(
      )을 중앙에 배치하는 작업이 포함됩니다. 고정 너비의 div 내의 요소. 이를 달성하기 위해 CSS와 div 요소의 조합을 사용합니다.

      해결책

        • "wrapper" 클래스가 있는 div에서.
        • 다음 CSS 스타일을 "wrapper" 클래스에 적용합니다.

          .wrapper {
              text-align: center;
          }
          로그인 후 복사

          이렇게 하면 "wrapper" div가 중앙에 배치되고

        • 다음 CSS 스타일을

            "래퍼" 클래스 내에서:

            .wrapper ul {
                display: inline-block;
                margin: 0;
                padding: 0;
                /* IE support */
                zoom: 1;
                *display: inline;
            }
            로그인 후 복사

            이렇게 하면

              인라인 요소처럼 동작하며 콘텐츠에 따라 동적으로 확장할 수 있습니다.

            • 다음 CSS 스타일을

              • 내의 요소:

                .wrapper li {
                    float: left;
                    padding: 2px 5px;
                    border: 1px solid black;
                }
                로그인 후 복사

                이렇게 하면

              • 요소는
                  가로로 정렬됩니다.

      코드 예

      <style>
          .wrapper {
              text-align: center;
          }
          .wrapper ul {
              display: inline-block;
              margin: 0;
              padding: 0;
              zoom: 1;
              *display: inline;
          }
          .wrapper li {
              float: left;
              padding: 2px 5px;
              border: 1px solid black;
          }
      </style>
      
      <div class="wrapper">
          <ul>
              <li>Element 1</li>
              <li>Element 2</li>
              <li>Element 3</li>
          </ul>
      </div>
      로그인 후 복사

      위 내용은 고정 너비 Div 내에서 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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