CSS에서 상위 Div 없이 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?
- Susan Sarandon원래의
- 2024-10-30 12:33:25914검색
상위 DIV 없이 순서가 지정되지 않은 목록을 가운데에 맞추는 방법
CSS에서 왼쪽을 유지하면서 순서가 지정되지 않은 목록(
- )을 가운데에 맞추는 방법 - 상위 div를 사용하지 않으면 정렬된 목록 항목이 어려울 수 있습니다. 이 효과를 얻는 방법은 다음과 같습니다.
- )으로 정의되는 테이블과 같은 구조를 만듭니다.
- 에 margin: 0 auto를 설정하면 테이블(예: 목록)이 포함된 요소의 중앙에 배치됩니다.
이 효과를 달성하는 CSS 코드는 다음과 같습니다.
<code class="css">ul { display: table; margin: 0 auto; }</code>설명하기 위해 다음은 제공된 HTML을 사용하지만 상위 div 없이 코드 조각을 보여줍니다.
<code class="html"><html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html></code>이 코드는 목록 항목을 왼쪽 정렬로 유지하면서 순서가 지정되지 않은 목록을 페이지 중앙에 배치합니다.
위 내용은 CSS에서 상위 Div 없이 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
상위 div와 함께 제공된 코드 조각은 div에 text-align: center를 사용하고 ul에 display: inline-block을 사용하여 목록을 가운데에 배치합니다. 그러나 이 방법에는 상위 div 래퍼가 필요합니다.
상위 div 없이 순서가 지정되지 않은 목록을 가운데에 배치하려면
- 고정된 너비가 없습니다.
해결책은
- display: table을 사용하여 테이블처럼 동작합니다. 이는 행이 목록 항목(
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.