바깥 쪽 Div에 수평 div를 센터링 하시겠습니까?

Question

가로형 메뉴 바를 만들고 있습니다.

내부 div가 포함 된 외부 div가 있습니다 (이 div는 각각 개별 메뉴 항목입니다).

저는이 내부 div에서 스타일을 지정하기 위해 float: left을 사용하여 세로 대신 가로로 표시합니다.

문제는 메뉴 막대가 왼쪽과 오른쪽에 고르지 않은 공간을 가지고있어서 전체 메뉴 막대가 중앙화 된 것처럼 보이지 않는다는 것입니다. 즉 왼쪽의 첫 번째 메뉴 항목의 왼쪽 테두리와 오른쪽 메뉴 항목과 오른쪽 테두리 항목 사이의 간격은 더 넓습니다.

메뉴 막대를 가운데에 표시하려면 왼쪽과 오른쪽에 동일한 여백/패딩이 필요합니다.

나는 외부 div에 margin-left: auto; margin-right: auto을 설정하고 내부 div에도 설정을 시도했다. 둘 다 도움이되지 않습니다. 그러나이 특별한 대답은, 하나의 사업부를 중심으로하는 것입니다 무엇을 내가 가지고있는 것은 중앙 될 필요가 수평 div의 (메뉴 항목)의 모음입니다 How to horizontally center a <div> in another <div>?

:

는 이미 여기에보고했다.

도움을 주시면 감사하겠습니다.

Answer 1

고정 폭을 가지는 내부 요소의 래퍼 :

• DEMO

참고 : 데모에서와 같이 목록을 사용하여 스타일의 메뉴 항목 의미 적으로는 더 나은.

Answer 2

먼저 모든 메뉴 항목의 너비가 지정되어 있고 display:inline이 기본값 인 경우 플로트가 필요하지 않습니다.

하지만 플로트를 설정하면 요소가 문서의 자연스러운 흐름에서 제거되므로 margin:auto은 가운데에 맞출 수 없습니다. 이 경우 할 수있는 일은 float을 사용하여 메뉴 항목에 대해 지정된 너비의 다른 컨테이너 div를 만드는 것입니다. 이제는 해결 방법을 이미 보았던 바깥 쪽 div 안에이 컨테이너 div를 가운데에 배치하는 것입니다. 예를 들어 컨테이너 div에서 margin:auto 기술을 사용하여 센터링 할 수 있습니다. 바깥 쪽 div에 text-align:center이 있는지 확인하십시오.

#outer { 
    text-align: center; 
} 
.menu-item { 
    display: inline; /* replace 'float:left' with this */ 
} 

• DEMO

그렇지 않으면 당신이 필요합니다 : 메뉴 항목은 다음과 스타일을 추가하려고 (정해진 크기 나 하위 요소처럼) 복잡하지 않은 경우

Answer 3

더 유연한 해결책을 찾으십시오. 실제로 탐색 요소에 대해 목록 항목을 사용해야합니다.

http://jsfiddle.net/qprdK/4/