상위 DIV 없이 순서가 지정되지 않은 목록을 가운데에 맞추는 방법

CSS에서 왼쪽을 유지하면서 순서가 지정되지 않은 목록(

)을 가운데에 맞추는 방법- 상위 div를 사용하지 않으면 정렬된 목록 항목이 어려울 수 있습니다. 이 효과를 얻는 방법은 다음과 같습니다.

제공된 코드 조각은 상위 div와 함께 div에 text-align: center를 사용하고 ul에 display: inline-block을 사용하여 목록을 가운데에 배치합니다. 그러나 이 방법에는 상위 div 래퍼가 필요합니다.

상위 div 없이 순서가 지정되지 않은 목록을 가운데에 배치하려면

에 고정 너비가 없으므로 margin 및 text-align과 같은 CSS 속성을 효과적으로 사용할 수 없습니다. .

해결책은 display: table을 사용하여

이 테이블처럼 동작하도록 설정하는 것입니다. 이는 행이 목록 항목(
• )으로 정의되는 테이블과 같은 구조를 만듭니다.
  에 margin: 0 auto를 설정하면 테이블(예: 목록)이 포함 요소 내 중앙에 배치됩니다.

  이 효과를 달성하는 CSS 코드는 다음과 같습니다.

  ul {
    display: table;
    margin: 0 auto;
  }

  시연하기 위해 다음은 제공된 HTML을 사용하지만 상위 div 없이 코드 조각을 보여줍니다.

  
  
  
    
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    

  이 코드는 순서가 지정되지 않은 목록을 페이지 중앙에 배치하고 목록 항목은 왼쪽 정렬을 유지합니다.