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

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

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

HTML 및 CSS 코드

<div class="topmenu-design">
    <ul></ul>
<pre class="brush:php;toolbar:false">#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 속성을 사용하여 이전 브라우저 간의 호환성을 보장합니다.