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

상위 Div를 사용하지 않고 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-10-29 23:39:29
원래의
384명이 탐색했습니다.

How to Center an Unordered List Without Using Parent Divs?

상위 래퍼 없이 정렬되지 않은 목록을 중앙에 배치

이 질문은 상위 div 요소. 목표는 목록 항목(

  • ) 내에서 왼쪽 정렬을 유지하는 것입니다.

    해결책:

    다음 CSS 코드는 왼쪽 정렬을 유지하면서 목록을 효과적으로 중앙에 배치합니다. 목록 항목의 경우:

    ul {
      display: table;
      margin: 0 auto;
    }
    로그인 후 복사

    설명:

    표시 설정: table은 목록을 테이블로 변환하여 사용 가능한 너비를 채울 수 있습니다. margin: 0 auto 속성은 테이블을 자동으로 중앙에 배치하므로 페이지의 목록도 자동으로 중앙에 배치됩니다.

    예:

    <code class="html"><ul>
      <li>56456456</li>
      <li>4564564564564649999999999999999999999999999996</li>
      <li>45645</li>
    </ul></code>
    로그인 후 복사

    결론:

    이 솔루션은 HTML에 추가 래퍼를 만들지 않고도 순서가 지정되지 않은 목록을 중앙에 배치해야 하는 필요성을 해결합니다. display: table 및 margin: 0 자동 속성을 활용하여 항목의 왼쪽 정렬을 유지하면서 목록을 중앙에 가로로 정렬합니다.

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

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