CSS 메뉴 센터 배치

Question

나는 html/css를 배우고있다. 나는 바보 같은 질문을하고 싶다. 내 헤더의 방향이

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 

이 가 지금은 헤더보다 약간 짧고 중앙에도 가고 하위 메뉴를 배치 할, 중앙에,하지만 난 할 수 없습니다 . 제 능력을 향상 시키도록 도와주세요. 미리 감사드립니다!

Answer 1

제가 올바르게 이해한다면 이것은 당신이해야하는 일입니다.

html 쪽에서 머리글과 하위 메뉴를 모두 감싸는 머리글을 만듭니다. 이것은 모든 것을 집중시키는 것입니다. 당신은 당신이 헤더했던 것처럼 당신이 같은 행동을 할 것 CSS 측에서 다음

<div id="container"> 
    <div id="header"> 

    </div> 

    <div id="submenu"> 

    </div> 
</div> 

로 끝날하지만 이번에는 모든 3 개 개의 div 태그에 중심 전략을 적용한다. 그러면 먼저 컨테이너를 가운데에 맞춘 다음 내부 요소를 컨테이너 자체의 가운데에 배치합니다. 이것은 결국 CSS가 될 것입니다.

#container { 
    margin: 0% auto; 
} 

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 
#submenu { 
    margin: 0% auto; 
} 

원하는 것을 구현하는 방법에 대한 순진한 방법입니다. 보다 우아한 해결책은 수업을 사용하는 것입니다. 반복되는 CSS를 작성하는 데 시간을 절약 할 수 있으며 반복해서 재사용 할 수 있습니다. 궁극적으로 클래스를 사용하면 결국은

<div id="container" class="center"> 
     <div id="header" class="center"> 

     </div> 

     <div id="submenu" class="center"> 

     </div> 
    </div> 

.center { 
    margin: 0% auto; 
} 

#header { 
    text-align: left; 
    width: 1280px; 
} 

희망이 있습니다. 또한

http://www.w3schools.com/는

Answer 2

가 바이올린을 참조 자원을이다

바이올린 : http://jsfiddle.net/uyECX/3/

데모 : http://jsfiddle.net/uyECX/3/embedded/result/