정렬되지 않은 목록(``)을 Div 내부에 중앙에 배치하는 방법은 무엇입니까?

ul을 div의 중앙에 수평으로 정렬하는 방법은 무엇입니까?

CSS를 사용하여 div 내에서 순서가 지정되지 않은 목록(

)을 중앙에 배치할 때 몇 가지 문제가 있습니다. 이 문제를 해결하기 위한 솔루션입니다. 다음은 원하는 결과를 얻기 위해 제공된 CSS와 제안된 방법에 대한 분석입니다.

주어진 CSS:

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding-left: 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

text-align: center; .container에 적용하면 ul을 포함하여 컨테이너 내의 모든 항목을 중앙에 맞추려는 것으로 보입니다. 그러나 이 속성은 요소 자체가 아닌 요소의 텍스트 콘텐츠만 정렬합니다.

다음은 ul을 div 내에서 수평 중앙에 맞추는 몇 가지 접근 방식입니다.

해결책 1: 사용 margin's auto:

이 방법에는 margin: 0 auto; ul에서 여백을 대칭으로 적용하여 효과적으로 중앙에 배치할 수 있습니다.

.container ul {
    margin: 0 auto;
}

해결책 2: 디스플레이 활용: table;:

이것은 솔루션은 디스플레이 속성의 테이블 렌더링 모드를 활용합니다. 디스플레이 설정: 테이블; ul에서는 테이블 컨테이너로 변환합니다. 그런 다음 margin: 0 auto; 해결 방법 1과 같은 방식으로 div 내의 ul을 중앙에 배치합니다:

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

해결 방법 3: text-align 구현: center; 및 inline-block:

이 방법은 디스플레이를 사용합니다: inline-block; ul의 재산. text-align과 결합하면: center; 상위 컨테이너에서는 ul을 텍스트 흐름 내의 인라인 요소로 중앙에 배치합니다.

.container { 
    text-align: center;
}

.container ul { 
    display: inline-block;
}

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