Div 내부에 정렬되지 않은 목록을 수평으로 가운데에 맞추는 방법은 무엇입니까?

HTML 요소를 가로로 가운데 정렬하기 위한 전략

문제:

순서가 지정되지 않은 목록(

)을 div를 만들고 text-align: center 및 left: 50%와 같은 방법을 사용하여 가로로 정렬하려고 시도했지만 실패했습니다.

해결책:

CSS는 다음과 같은 다양한 접근 방식을 제공합니다. 수평 중앙 요소. 이 종합 가이드에서는 제공된 코드 조각에 설명된 5가지 고유한 방법을 살펴봅니다.

1. Max-Width and Margin: 이 기술은 필요한 요소에 최대 너비와 여백을 직접 적용합니다. 센터링. 고정 너비 요소에는 잘 작동하지만 브라우저 호환성이 제한됩니다.
2. Inline-Block 및 Text-Align: 디스플레이 활용: inline-block은 요소를 텍스트로 변환하여 텍스트를 허용합니다. 영향을 미치도록 정렬합니다. 이 방법은 또한 다양한 너비를 효과적으로 수용합니다.
3. 디스플레이: 테이블 및 여백: 이전 솔루션과 유사하게 이 접근 방식은 중앙에 배치할 요소에 디스플레이: 테이블 및 여백을 사용하여 호환성을 유지합니다. 이전 브라우저.
4. 번역 및 위치: 이 기술은 위치: 절대 및 번역()을 사용하여 요소를 중앙에 배치합니다. 그러나 문서 흐름에서 요소를 제거하므로 주의해서 사용해야 합니다.
5. Flexible Box 레이아웃 모듈: Flexbox의 출현으로 요소 중심 배치가 매우 간단해졌습니다. 간단히 display: flex 및 justify-content: center를 상위 컨테이너에 적용하세요.

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