CSS에서 너비를 알 수 없는 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

폭을 알 수 없는 정렬되지 않은 목록을 중앙에 배치

웹 디자인에서는 쉽게 탐색할 수 있도록 바닥글에 정렬되지 않은 링크 목록을 표시하는 것이 일반적입니다. 그러나 목록의 너비를 알 수 없는 경우 목록 항목을 가로 중앙에 배치하는 것이 어려울 수 있습니다.

항목을 인라인으로 표시할 수 있는 목록에 대한 한 가지 솔루션은 다음과 같습니다.

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

이렇게 하면 바닥글에 텍스트 정렬 센터가 적용되고, 기본 목록 스타일이 제거되며, 목록 항목이 인라인 요소로 표시되도록 설정됩니다.

단, 목록 항목을 블록으로 표시해야 하는 경우에는 다음 CSS 코드를 사용하세요. 사용할 수 있습니다:

<code class="css">#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }</code>

이 접근 방식은 바닥글을 전체 너비로 설정하고 오버플로를 숨깁니다. 순서가 지정되지 않은 목록은 절대 위치에 배치되고 왼쪽으로 부동된 다음 왼쪽으로 50% 이동됩니다. 목록 항목도 절대적으로 배치되고 왼쪽으로 부동되며 오른쪽으로 50% 이동됩니다. 이는 너비에 관계없이 정렬되지 않은 목록을 효과적으로 중앙에 배치합니다.

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