HTML5 CSS3嵌套DIV定位

Question

/* HTML */ 
<header role="heading"> 
    <div class="logo"> 
     <h1><a href="/">this is the banner</a></h1> 
    </div> 
<header> 

/* CSS */ 
header 
{ 
    background-color: rgb(255, 165, 0); 
    height: 160px; 
    width: 100%; 
} 

header .logo 
{ 
    margin: 30px auto; 
    width: 980px; 
} 

所以，我希望爲.logo到header內中心，它...但它拉header 30PX從頂部。

我試過使header相對，但只會導致居中（30px自動）不起作用。

任何意見將不勝感激！

Answer 1

有時邊距也會影響父級，我建議採用以下方法：保持標記相同，並在容器上使用填充而不是邊距。

/* CSS */ 
header 
{ 
    background-color: rgb(255, 165, 0); 
    height: 160px; 
    width: 100%; 
    padding:30px 0px; /* Use padding here*/ 
} 

header .logo 
{ 
    margin: 0px auto; /* Instead of margin here */ 
    width: 980px; 
} 

Answer 2

的尷尬樣，但我看了看這個問題，一旦我的貼吧，看到答案... 我以前margin: 0 auto居中.logo和padding-top: 30px使其下降。

抱歉浪費時間！也許這會幫助別人。