목록 항목 정렬에 영향을 주지 않고 정렬되지 않은 목록을 가로로 가운데에 맞추는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-10-30 03:26:29
원래의
281명이 탐색했습니다.

How to Center an Unordered List Horizontally Without Affecting List Item Alignment?

순서가 지정되지 않은 목록에 대한 텍스트 정렬 사용자 정의 달성

배경:
목록을 수직 및/또는 수평으로 정렬하는 것은 일반적인 요구 사항입니다. 세로 정렬을 제어하는 ​​것은 상대적으로 간단하지만 개별 목록 항목 정렬에 영향을 주지 않고 순서가 지정되지 않은 목록을 가로로 정렬하는 것은 다소 까다로울 수 있습니다.

과제:
이 경우 목표는 목록 항목(

  • )의 왼쪽 정렬을 유지하면서 너비를 알 수 없는 순서가 지정되지 않은 목록(
      )을 가운데에 배치하는 것입니다. 이는 쉬운 솔루션을 제공하는 상위 div 래퍼 사용을 제외합니다.

      해결책:
      'display' 속성을 활용하여 'table' 값을 사용할 수 있습니다. 순서가 없는 목록(

        ). 그러면 목록이 표로 설정되고 해당 요소가 표와 같은 방식으로 정렬됩니다. 여백을 0 자동으로 설정하면 상위 컨테이너 내에서 테이블(및 목록)을 중앙에 배치할 수 있습니다.

        코드 구현:

        <code class="css">ul {
          display: table;
          margin: 0 auto;
        }</code>
        로그인 후 복사

        이 수정 개별 목록 항목의 왼쪽 정렬을 유지하면서 순서가 지정되지 않은 목록을 가로 중앙에 배치할 수 있습니다.

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

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