수평 메뉴와 목록 항목을 완벽하게 중앙에 맞추는 방법은 무엇입니까?

가로

메뉴

문제:

순서가 지정되지 않은 목록(

)으로 구성된 가로 메뉴는 컨테이너 <div> 내에서 중앙에 배치되어야 합니다.
<div> 성공하면 개별 목록 항목(
• )이
  내에서 왼쪽 정렬된 상태로 유지됩니다.

  해결책:

  완벽한 중앙 정렬을 달성하려면

  및 해당 목록 항목이 있는 경우 다음 접근 방식을 권장합니다.
  1. Float Wrapper:
     음수 왼쪽 오프셋을 사용하여 위치를 "상대적"으로 설정합니다. 이렇게 하면 래퍼가 화면 밖에서 왼쪽으로 배치됩니다.
     • 역 중첩 요소: 내부
       "position:relative"와 50%의 양수 왼쪽 오프셋을 사용하여 래퍼 내에서. 이렇게 하면
       정확히 래퍼 중앙에 있습니다.
       • 플로트 목록 항목:
       • 내에서 자신의 위치를 ​​유지합니다. "위치: 상대" 사용

  코드 예:

  #buttons {
    float: right;
    position: relative;
    left: -50%;
    text-align: left;
  }
  
  #buttons ul {
    list-style: none;
    position: relative;
    left: 50%;
  }
  
  #buttons li {
    float: left;
    position: relative;
  }

  로그인 후 복사

  HTML 예:

  <div>

  로그인 후 복사

  이 구현을 사용하면 메뉴가 완벽하게 중앙에 배치되고 목록 항목이 수평 내에 고르게 분포됩니다. 공간.

  위 내용은 수평 메뉴와 목록 항목을 완벽하게 중앙에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!