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

고정 너비 DIV 내에서 순서가 지정되지 않은 목록을 가운데에 배치하는 방법

웹 디자인 작업을 할 때 요소를 수직 및 수평으로 정렬하는 것은 일반적인 작업일 수 있습니다. 그러한 시나리오 중 하나는 고정 너비 div 내에서 정렬되지 않은 목록(

)을 중앙에 배치하는 것입니다.

해결책

중앙 정렬을 달성하려면 CSS 표시 속성과 centered div를 사용합니다.

먼저 래퍼 div를 만들고 text-align: center 속성을 적용합니다. 이렇게 하면 div 내의 콘텐츠가 수평 중앙에 배치됩니다.

다음으로

중앙 div 내의 요소를 선택하고 다음 CSS 속성을 적용합니다.

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

• display: inline-block;: 이 속성은
  고정된 너비를 차지하면서 인라인 요소처럼 동작합니다.
  • margin: 0; and padding: 0;: 이 속성은
    에 적용된 기본 여백이나 패딩을 제거합니다.

    마지막으로

  • 내의 항목에 대해 다음 CSS 속성을 적용합니다.

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

    • float: left;: 이 속성은
    • 항목에 대한 인라인 레이아웃을 생성합니다. 항목.
    • 패딩: 2px 5px; 테두리: 1px 단색 검정; (선택사항): 이 값을 조정하여
    • 항목을 원하는 대로 선택하세요.

    이러한 CSS 기술을 결합하면

    그리고 그
    • 항목은 고정 너비 div 내 중앙에 배치되어 시각적으로 매력적인 정렬을 제공합니다.

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