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

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

Mary-Kate Olsen

풀어 주다： 2024-10-31 08:17:30

원래의

666명이 탐색했습니다.

How to Center an Unordered List Without a Parent Div?

왼쪽 정렬된 목록 항목을 사용하여 순서가 지정되지 않은 목록을 가운데에 배치

웹 디자인에서는 목록 항목의 왼쪽 정렬을 유지하면서 순서가 지정되지 않은 목록을 가운데에 배치해야 하는 경우가 자주 발생합니다. 일반적으로 이는 래퍼

텍스트 정렬: 중앙; 및

없이 순서가 지정되지 않은 목록을 중앙에 배치해야 하는 문제에 직면하는 경우가 많습니다.

이를 달성하려면 색다른 방법을 사용해야 합니다. 한 가지 해결책은 display: 테이블을 활용하는 것입니다. 재산.

이 솔루션의 코드 조각은 다음과 같습니다.

<code class="CSS">ul {
  display: table;
  margin: 0 auto;
}</code>

로그인 후 복사

HTML 예:

<code class="HTML"><html>

<body>
  <ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul>
</body>

</html></code>

로그인 후 복사

이 방법은

의 왼쪽 정렬을 유지하면서; 요소를 사용하여 래핑
가 필요하지 않습니다. 복잡한 레이아웃에서 순서가 지정되지 않은 목록을 정렬하는 간단하고 안정적인 솔루션입니다.
위 내용은 상위 Div 없이 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：CSS Flexbox와 Gridbox: 자세한 비교 다음 기사：콘텐츠가 항목 너비를 초과할 때 Flexbox 항목 내에서 텍스트를 정렬하는 방법은 무엇입니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

1724

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

1880

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47