CSS 수직 정렬 오버 플로우 헤더

Question

좋아, 그래서 나는

<header id="masthead" role="banner"> 
    <div id="header_fix"></div> 
</header> 

및

#masthead { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    background-repeat:no-repeat; 
    background-size:cover; 
    padding: 70px 0; 
} 
#header_fix { 
    margin: 0 auto; 
    width: 1355px; 
    height: 164px; 
    text-align: center; 
    background-image:url(images/Banner_SF.png); 
    /*background-size: contain;*/ 
} 

내가 부모 헤더 header_fix div의 오버 플로우를 할 CSS 페이지 (워드 프레스)의 섹션이 (head_fix fiv 이미지는 1800px처럼 매우 긴 배너입니다.) div의 중심 (따라서 bg-image의 중심)을 항상 창의 중심에 맞 춥니 다.

______________________________________ 
    | masthead always window width  | 
____|_____________________________________|___ 
| |  header_fix always centered  | | 
|___|_____________________________________|___| 
    |          | 
    |_____________________________________| 

다양한 시도가 ... 부모 - 자식 관계와 관련이 있습니까? like는 div처럼 취급하지 않는 헤더이거나 적어도 display : block; 또는 뭔가? 어떤 도움을 주셔서 감사합니다.

Answer 1

추가 요소가 필요하지 않습니다. background-position을 사용하여 배경 이미지를 중앙에 배치 할 수 있습니다. 이미 소스 이미지와 동일한 크기입니다.

는 여기 속기에 있습니다

#masthead { 
    width: 100%; 
    margin: auto; 
    background: url(images/Banner_SF.png) no-repeat center top; 
} 

은 다른 질문에 대답하려면 이 없음는 <header> 요소는 그 not being supported in some browsers이 아닌, 일반 <div> 요소 다르게 렌더링하지 않습니다. 기본적으로 블록 수준 요소입니다.