> 웹 프론트엔드 > CSS 튜토리얼 > CSS만 사용하여 가로 메뉴를 가운데에 배치하는 방법은 무엇입니까?

CSS만 사용하여 가로 메뉴를 가운데에 배치하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-12-21 05:03:13
원래의
634명이 탐색했습니다.

How to Center a Horizontal Menu Using Only CSS?

가로 메뉴를 가운데 정렬하는 방법

가로 메뉴를 가운데 정렬하는 방법을 여러 가지 시도했음에도 불구하고 어려움을 겪으셨습니다. 이 가이드는 문제를 자세히 조사하고 검증된 솔루션을 제공합니다.

HTML 및 CSS 코드

<div class="topmenu-design">
    <ul>
로그인 후 복사
#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;
}

#buttons a {
    text-decoration: none;
    margin: 10px;
    background: red;
    float: left;
    border: 2px outset blue;
    color: #fff;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
}

#buttons a:hover {
    border: 2px inset blue;
    color: red;
    background: #f2f2f2;
}

#content {
    overflow: hidden; /* hide horizontal scrollbar*/
}
로그인 후 복사

해결책: 부동 및 상대 위치 지정 활용

권장 사항 솔루션에는 부동 및 상대 위치 지정이 포함됩니다. 이 기술에는 화면 왼쪽 왼쪽에 위치한 플로트 래퍼로 메뉴를 래핑하는 작업이 수반됩니다. 그 후 중첩된 목록 항목은 반대 방향으로 배치되어 효과적으로 래퍼 내에서 수평으로 중앙에 배치됩니다.

구현

  1. float: right 속성을 상위 div에 추가하여 정렬합니다.
  2. 위치 설정: 상대 및 왼쪽: 래퍼에서 -50%로 50% 이동합니다. ul에 position:relative 및 left:50%를 적용하여 겹침을 방지합니다.
  3. li 요소에 float: left를 설정하여 다음을 보장합니다. ul 내에서 왼쪽으로 떠있습니다.
  4. 스타일을 추가하여 텍스트 장식, 여백, 배경 등 메뉴 모양을 맞춤설정하세요. color.
  5. 추가 고려 사항

이 기술은 콘텐츠의 흐름을 유지하고 중앙 메뉴 아래에 다른 요소가 나타날 수 있도록 합니다. JavaScript 솔루션과 달리 이 접근 방식은 CSS 속성을 사용하여 이전 브라우저 간의 호환성을 보장합니다.

위 내용은 CSS만 사용하여 가로 메뉴를 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿