상위 Div를 사용하지 않고 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

상위 Div를 사용하지 않고 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-10-29 23:39:29

원래의

391명이 탐색했습니다.

How to Center an Unordered List Without Using Parent Divs?

상위 래퍼 없이 정렬되지 않은 목록을 중앙에 배치

이 질문은 상위 div 요소. 목표는 목록 항목(

) 내에서 왼쪽 정렬을 유지하는 것입니다.

해결책:

다음 CSS 코드는 왼쪽 정렬을 유지하면서 목록을 효과적으로 중앙에 배치합니다. 목록 항목의 경우:

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

로그인 후 복사

설명:

표시 설정: table은 목록을 테이블로 변환하여 사용 가능한 너비를 채울 수 있습니다. margin: 0 auto 속성은 테이블을 자동으로 중앙에 배치하므로 페이지의 목록도 자동으로 중앙에 배치됩니다.

예:

<code class="html"><ul>
  <li>56456456</li>
  <li>4564564564564649999999999999999999999999999996</li>
  <li>45645</li>
</ul></code>

로그인 후 복사

결론:

이 솔루션은 HTML에 추가 래퍼를 만들지 않고도 순서가 지정되지 않은 목록을 중앙에 배치해야 하는 필요성을 해결합니다. display: table 및 margin: 0 자동 속성을 활용하여 항목의 왼쪽 정렬을 유지하면서 목록을 중앙에 가로로 정렬합니다.

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