정렬되지 않은 목록을 div 내에서 수평으로 중앙에 배치하려면 어떻게 해야 합니까?

DIV 중앙에 UL을 수평으로 정렬하는 방법

주어진 HTML에서 순서가 지정되지 않은 목록(

)은 div 내에 배치되고 목표는 div 중앙에 가로로 정렬하는 것입니다. 이를 달성하려면 다음 접근 방식 중 하나를 활용할 수 있습니다.

해결책 1: 최대 너비 및 여백 사용

ul {
  max-width: 400px;
  margin: 0 auto;
}

로그인 후 복사

이 방법은 ul을 사용하고 왼쪽과 오른쪽 여백을 동일하게 적용하여 자동으로 div 내 중앙에 배치합니다.

해결책 2: 인라인 블록과 함께 텍스트 정렬 활용

.container {
  text-align: center;
}

ul {
  display: inline-block;
}

로그인 후 복사

이 솔루션은 text-align: center를 사용하여 div를 정렬하고 ul을 인라인 블록 요소로 만듭니다. 인라인 블록 요소는 텍스트 정렬 속성을 존중하므로 ul은 중앙에 배치됩니다.

해결책 3: 디스플레이 사용: 테이블 및 여백

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

로그인 후 복사

이 방법에는 다음이 포함됩니다. ul을 테이블로 표시하도록 설정하면 ul이 블록 요소로 동작하고 자동으로 테이블 내 중심에 놓이게 됩니다. div.

해결책 4: 위치, 왼쪽 및 변환 사용

.container {
  position: relative;
}

ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

로그인 후 복사

이 접근 방식은 ul을 div 내에 절대적으로 배치하고 왼쪽에서 50% 이동합니다. left: 50%를 사용하고 마지막으로 변환을 통해 50% 뒤로 이동합니다. translateX(-50%).

해결책 5: Flexbox 활용

.container {
  display: flex;
  justify-content: center;
}

로그인 후 복사

Flexbox를 사용하여 컨테이너를 Flexbox로 표시하도록 설정하고 justify-content 지정: center는 ul이 div 내에서 수평 중앙에 위치하도록 보장합니다.

이러한 솔루션은 다음을 수행하는 다양한 기술을 제공합니다. ul을 div의 가로 중앙에 배치하면 브라우저 호환성과 원하는 동작을 기반으로 가장 적절한 접근 방식을 선택할 수 있습니다.

위 내용은 정렬되지 않은 목록을 div 내에서 수평으로 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!