너비를 알 수 없는 정렬되지 않은 목록을 가로로 가운데에 맞추는 방법은 무엇입니까?

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

정렬되지 않은 목록으로 표시되는 링크 집합으로 바닥글을 만들 때 종종 바닥글 div 내에서 목록을 가로 중앙에 배치하는 것이 바람직합니다. 텍스트 요소나 너비가 알려진 요소를 중앙에 배치하는 것은 간단하지만 너비를 알 수 없는 정렬되지 않은 목록을 중앙에 정렬하는 것은 어렵습니다.

인라인 목록 항목

목록 항목이 인라인으로 표시할 수 있으며 해결 방법은 간단합니다.

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

차단 목록 항목

그러나 어떤 경우에는 display: block을 사용해야 할 수도 있습니다. 목록 항목에 있습니다. 이 경우 약간 더 복잡한 솔루션이 필요합니다.

<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>

이 CSS는 순서가 지정되지 않은 목록을 바닥글 div 중앙에 배치하고 목록 항목이 목록 내에서 수평으로 정렬되도록 오프셋합니다.

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