고정 너비 Div 내에서 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

를 사용하여 순서가 지정되지 않은 목록(

)을 중앙에 배치합니다. 고정 너비 Div의 요소

이 시나리오에는

를 포함하는 순서가 지정되지 않은 목록(

)을 중앙에 배치하는 작업이 포함됩니다. 고정 너비의 div 내의 요소. 이를 달성하기 위해 CSS와 div 요소의 조합을 사용합니다.

해결책

1. "wrapper" 클래스가 있는 div에서.

   • 다음 CSS 스타일을 "wrapper" 클래스에 적용합니다.

     .wrapper {
         text-align: center;
     }

     이렇게 하면 "wrapper" div가 중앙에 배치되고

   • 다음 CSS 스타일을

     "래퍼" 클래스 내에서:

     .wrapper ul {
         display: inline-block;
         margin: 0;
         padding: 0;
         /* IE support */
         zoom: 1;
         *display: inline;
     }

     이렇게 하면

     인라인 요소처럼 동작하며 콘텐츠에 따라 동적으로 확장할 수 있습니다.

     • 다음 CSS 스타일을

     • 내의 요소:

       .wrapper li {
           float: left;
           padding: 2px 5px;
           border: 1px solid black;
       }

       이렇게 하면

       • 요소는
         가로로 정렬됩니다.

코드 예

<style>
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        zoom: 1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>
</div>

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