導航欄和圖像居中問題

作爲學校項目的一部分，我嘗試創建我的第一個網頁。但是，當我在頂部欄中放置徽標並居中放置徽標時，我的導航欄向下移動，導致此問題停滯不前。我想知道有沒有人可以幫忙？導航欄和圖像居中問題

這裏是我的代碼：

#header { 
 
    height: 200px; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 
#top-bar { 
 
    background-repeat: repeat-x; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 200px; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
//Top Navigation Bar// 
 
.navigation-bar { 
 
    background-color: black; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 
img.center { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.navigation-bar ul { 
 
    padding: 210px; 
 
    margin: 0px; 
 
    text-align: center; 
 
} 
 
.navigation-bar li { 
 
    list-style-type: none; 
 
    padding: 8px; 
 
    height: 24px; 
 
    margin-top: 30px; 
 
    margin-bottom: 4px; 
 
    display: inline; 
 
} 
 
.navigation-bar li a { 
 
    color: gray; 
 
    background-color: black; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    box-shadow: 0px; 
 
    border-radius: 3px; 
 
    padding-right: 1em; 
 
    padding-left: 1em; 
 
    line-height: 2em; 
 
    margin-right: 16px; 
 
} 
 
.navigation-bar li:first-child { 
 
    margin-left: 20px; 
 
    border: #C00; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="feistybite.css"> 
 
    <div id="header"> 
 

 

 
    <div id="top-bar"></div> 
 

 

 

 

 

 
    <div class="navigation-bar"> 
 
     <img src="strikerlogo.png" class="center"> 
 

 

 
     <div id="navigation-container" class="cf"> 
 
     <ul> 
 
      <li><a href="#">Miten se toimii</a> 
 
      </li> 
 
      <li><a href="#">Osta</a> 
 
      </li> 
 
      <li><a href="#">Tarina</a> 
 
      </li> 
 
      <li><a href="#">Meistä</a> 
 
      </li> 
 
      <li><a href="#">Uutisia</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

來源

2017-02-15 ECheibaa

不知道你想達到什麼樣的設計，但我只是改變了導航欄位置，相對的，圖像爲絕對，所以...設置爲左側50％，並使用CSS屬性transform: translateX(-50%);圖像終於居中

https://jsfiddle.net/3k65c20u/1/

來源

2017-02-15 13:38:16

刪除padding: 210px在.navigation-bar ul規則！

來源

2017-02-15 13:40:12 Anfuca

這個偉大的工程，謝謝！ – ECheibaa

改變CSS中ul到，除去padding:210px;

.navigation-bar ul { 
    margin: 0px; 
    text-align:center; 
}

來源

2017-02-15 13:50:40

導航欄和圖像居中問題

回答

相關問題