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

Div 내에서 순서가 지정되지 않은 목록을 가로 가운데에 배치

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

)을 가로로 가운데에 맞추면 다음과 같은 문제가 발생합니다. 도전. "text-align: center" 또는 왼쪽 위치 지정(왼쪽: 50%)을 사용하여 목록을 정렬하려는 시도는 실패했습니다.

목표: 목표는 목록의 적절한 수평 정렬을 달성하는 것입니다. div 컨테이너 내에 목록을 추가하세요.

해결책:

요소를 div 내에서 수평으로 배치하면 다양한 CSS 기술을 사용할 수 있습니다.
1. max-width 및 margin:
   요소를 추가하고 "auto"의 왼쪽 및 오른쪽 여백을 추가하여 상위 div 내에서 자동으로 가운데에 배치합니다.
   • display: inline-block 및 text-align: 그러면 요소가 중앙 텍스트 내의 텍스트 요소로 정렬됩니다.
   • display: table 및 margin: 이전 기술과 유사하게
     요소를 "table"에 추가하고 "margin: auto"를 적용하여 중앙에 정렬합니다.
     • position:absolute,translateX,left: 이 방법을 사용하려면
       요소를 "절대"로 설정하고 왼쪽 및 변환 속성을 사용하여 반대 방향으로 50% 이동하고 수평으로 중앙에 배치합니다.
       • Flexbox 레이아웃: 디스플레이를 설정하여 유연한 상자 모듈을 활용하세요. 상위 div를 "flex"로 설정하고 "justify-content: center"를 적용하여

예제 코드:

/* Solution 1: max-width and margin */
.container ul {
    max-width: 400px;
    margin: 0 auto;
}

/* Solution 2: display: inline-block and text-align */
.container-2 {
    text-align: center;
}

.container-2 ul {
    display: inline-block;
}

/* Solution 3: display: table and margin */
.container-3 ul {
    display: table;
    margin: 0 auto;
}

/* Solution 4: position: absolute, translateX, and left */
.container-4 ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Solution 5: Flexbox Layout */
.container-5 {
    display: flex;
    justify-content: center;
}

.container-5 ul {
    list-style-position: inside;
}

로그인 후 복사

이러한 솔루션 중 하나를 CSS에 적용하면 순서가 지정되지 않은 목록을 수평으로 중앙에 효과적으로 배치할 수 있습니다. div 컨테이너입니다.

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