CSS를 사용하여 고정 너비 Div 내부에 정렬되지 않은 목록을 가운데에 배치하려면 어떻게 해야 합니까?

웹 디자인: 고정 너비 Div 내에서 순서가 지정되지 않은 목록 중앙에 배치

HTML 요소로 작업할 때 특정한 정렬과 크기 조정이 필요한 것이 일반적입니다. 일반적인 시나리오에는 정의된 너비를 가진 컨테이너 내에서 정렬되지 않은 목록(

)을 중앙에 배치하는 작업이 포함됩니다. 이 레이아웃을 구현하기 위해 CSS의 기능을 활용할 수 있습니다.

해결책:

를 중앙에 배치하고
• 를 개별적으로 중앙에 배치합니다. 요소의 경우 동적 너비 조정을 보장하면서 다음 전략을 구현합니다.

  .wrapper {
      text-align: center;
  }
  
  .wrapper ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      /* Ensure compatibility with older versions of Internet Explorer */
      zoom: 1;
      *display: inline;
  }
  
  .wrapper li {
      float: left;
      padding: 2px 5px;
      border: 1px solid black;
  }

  로그인 후 복사

  설명:

  1. .wrapper 클래스는 텍스트를 사용하여 전체 목록 컨테이너를 중앙에 배치합니다. -align: center;.
  2. 중첩된 .wrapper ul은 display: inline-block;을 사용하여
     인라인 속성을 유지하면서 필요한 공간만 차지합니다. 또한 적절한 간격을 위해 기본 여백과 패딩을 제거합니다.
  3. 이전 버전의 Internet Explorer의 경우 확대/축소: 1; 브라우저 간 호환성을 보장합니다.
  4. *display: inline; Internet Explorer 6 이하에 인라인 차단 동작을 적용합니다.
  5. 각
  6. 요소는
     float: left;를 설정하여. 시각적 매력을 높이기 위해 개별 패딩과 테두리가 추가되었습니다.

  구현:

  <div class="wrapper">
      <ul>
          <li>Three</li>
          <li>Blind</li>
          <li>Mice</li>
      </ul>
  </div>

  로그인 후 복사

  참고: 이 솔루션은 최대 너비를 제공합니다.

  너비는 콘텐츠에 따라 동적으로 조정됩니다.

  업데이트:

  실습 데모를 보려면 참조 자료에 제공된 jsFiddle 링크를 방문하세요.

  위 내용은 CSS를 사용하여 고정 너비 Div 내부에 정렬되지 않은 목록을 가운데에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!