Div 내에서 목록을 수평으로 중앙에 배치하는 방법은 무엇입니까?

Div 내에서 목록을 중앙에 배치하는 방법

고정 너비 div 내에서 항목 목록을 중앙에 배치하는 것이 바람직한 경우가 많습니다. 이는 HTML과 CSS 기술의 조합을 통해 달성할 수 있습니다.

해결책:

목록과 해당 하위 요소를 중앙에 배치하려면 다음 단계를 사용합니다.

1. text-align: center;를 사용하여 div에 목록을 래핑합니다.
2. 표시 설정: 인라인 블록; 목록을 div 내 중앙에 배치합니다.
3. 원하는 결과를 얻기 위해 목록과 해당 요소에 적절한 여백과 패딩을 설정합니다. 간격.

코드:

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

.wrapper {
    text-align: center;
}

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

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

설명:

• 래퍼 div는 목록을 가로 중앙에 배치합니다.
• 목록의 인라인 블록 표시는 div 내에서도 수평으로 위치를 지정합니다.
• 목록과 목록 항목의 여백과 안쪽 여백은 요소의 간격과 모양을 조정합니다.

다음 단계를 수행하면 div 내에서 목록을 효과적으로 중앙에 배치하여 균형 있고 시각적으로 매력적인 레이아웃을 확보할 수 있습니다.

위 내용은 Div 내에서 목록을 수평으로 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!