CSS - div를 상단 중앙에 맞 춥니 다

Question

100 % 너비 인 머리글 내부에 div를 가운데에 정렬하고 싶습니다. 가운데 맞춤을해야하는 div는 실제 너비와 높이를가집니다. 위치 절대 값을 사용하려고 시도했지만 화면의 크기를 조정할 때 div가 가운데에 머물러있게됩니다. div가 화면 중심이 아닌 디자인의 중심에 있기를 바랍니다. 어떻게해야합니까? 나는 또한 이것을 위해 고정 된 위치를 사용하고 싶지 않다.

CSS :

header{ 
    position: relative; 
    width: 100%; 
    height: 65px; 
    background-color: #662D91; 
} 
#banner{ 
    position: absolute; 
    left: 50%; 
    margin-left: -240px; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
} 

HTML :

<header> 
     <div id="banner"> 
      <a href="/index"> 
       <img src="/_images/layout/PentaOneStop_headerLogo.png" class="img-center" /> 
      </a> 
     </div> 
    </header> 

편집 : 전체 폭 헤더와 디자인의 폭 로고 사이 사업부를 추가하여 내 문제를 해결했다. 내 문제가 해결 된 것 같습니다. JSFiddle 내 문제에 대한 내 솔루션의

: http://jsfiddle.net/U3Hpa/2/

Answer 1

#banner{ 
    margin-left: auto; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
} 

수동으로 왼쪽 위치 및 여백을 정의하여, 당신은 브라우저를 할 수 있도록 상관없이 그 어떤 다른 div의 크기. 여백의

자동 기능은 automatially 간단한 솔루션은 텍스트 정렬을하는 것입니다 헤더

Answer 2

에 사업부 상대의 중심을 것이다 센터.

#banner{ 
    text-align: center; 
} 

http://jsfiddle.net/U3Hpa/

Answer 3

이 시도 :

header{ 
    position: relative; 
    width: 980px; 
    height: 65px; 
    background-color: #662D91; 
} 
#banner{ 
    position: relative; 
    margin: 0 auto; 
    width: 480px; 
    height: 115px; 
    border-radius: 20px; 
} 

Answer 4

당신이 시도해야합니다

#banner{ 
position: fixed; 
left: 50%; 
margin-left: auto; 
margin-right: auto; 
width: 480px; 
height: 115px; 
border-radius: 20px; 
} 

Answer 5

을 나는 헤더 요소의 자식이었다 다른 사업부를 추가하여 내 문제를 해결 #banner의 부모. 그 다음 980 픽셀 (콘텐츠 컨테이너 너비와 동일)의 너비로 설정하고 margin: 0 auto;으로 설정합니다. 그건 내 문제를 해결하는 것 같았다. HTML 마크 업을 변경하지 않고 CSS 솔루션을 찾고 있었지만 찾지 못했습니다. 모든 피드백에 감사드립니다.

피들 (Piddle)은 작은 뷰포트로 인해 솔루션을 가장 잘 나타내지는 않지만 코드는 정확합니다.

JSFiddle : http://jsfiddle.net/U3Hpa/2/