用於導航的中心對齊不與標題對齊（也居中）

我的導航和我的標題都設置爲對齊居中，但導航被推到比頁面上其他所有內容更遠的位置。我試着改變填充和邊距爲0，但它沒有幫助。這也發生在我的頁腳中的鏈接，所以我認爲這可能與他們是鏈接的事實有關。用於導航的中心對齊不與標題對齊（也居中）

/*NAVIGATION*/ 
 
nav { 
 
    text-align: center; 
 
    background-color: #e4e6e5; 
 
    \t width: 100%; 
 
    \t border-bottom: solid #05182e 2px; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
    font-size: 35px; 
 
    padding: 15px; 
 
    font-weight: bold; 
 
    vertical-align: middle; 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
nav a{ 
 
\t border-radius: 10%; 
 
\t padding: 8px; 
 
\t background-color: #cccccc; 
 
\t color: #1f3b5a; 
 
\t text-decoration: none; 
 
\t font-size: 30px; 
 
\t transition: all 0.5s ease-in-out; 
 
} 
 
nav a:hover{ 
 
\t font-size: 40px; 
 
\t transition: all 0.5s ease-in-out; 
 
} 
 
nav img{ 
 
\t width: 30%; 
 
\t border: none; 
 
\t transition: all 0.5s ease-in-out; 
 
} 
 
nav img:hover{ 
 
\t width: 40%; 
 
\t transition: all 0.5s ease-in-out; 
 
} 
 
nav ul { 
 
    margin: 0; 
 
} 
 
nav ul li:last-child a { 
 
    background-color:#e4e6e5; 
 
} 
 

 
/*HEADER*/ 
 
section.header{ 
 
\t margin-top:40px; 
 
\t color: #05182e; 
 
\t text-align: center; 
 
\t font-size: 30px; 
 
\t width: 100%; 
 
\t font-family: 'Bitter', serif; 
 
\t padding:0; 
 
    list-style-type: none; 
 
}

<!-- NAVIGATION --> 
 
\t <nav> 
 
\t  <ul> 
 
\t  \t <li><img src="images/logo.png" alt="Canadian Women's Hockey League Logo"></li> 
 
\t   <li> <a href="index.html" target="_blank">Home</a></li> 
 
\t   <li> <a href="roster.html" target="_blank">Roster</a></li> 
 
\t   <li> <a href="schedule.html" target="_blank">Schedule</a></li> 
 
\t   <li><a href="http://cwhl.ca" target="_blank"><img src="images/cwhllogo.png"></a></li> 
 

 
\t  </ul> 
 
\t </nav> 
 

 
<!-- HEADER --> 
 
\t <section class="header"> 
 
\t  <h1> 
 
\t  \t Brampton Thunder 
 
\t  </h1> \t 
 
\t </section> \t

來源

2016-02-28 Eleander

刪除了圖像，現在它居中 –

添加以下，因此不會與你的菜單幹涉應該保持居中與形象標誌是它推到我剛剛右側的下方

nav img{ 
    width: 30%; 
    border: none; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    transition: all 0.5s ease-in-out; 
}

來源

2016-02-29 00:04:10

用於導航的中心對齊不與標題對齊（也居中）

回答

相關問題