2017-02-24 63 views
3
h1{ 
     text-align:center; 
     font-family: 'Nosifer', cursive; 
     font-size:35px; 

    } 



    nav { 
     border-top: 5px solid black; 
     padding:5px 5px; 
       text-align:center; 


     } 

    nav a:link,a:visited { 
     border-radius: 0 0 15px 15px; 
     padding:0px 15px; 
    } 


    nav a { 

     float: left; 
     font-weight: bold; 
     color: #000; 
     margin: 0 5px; 
     background-color: #131313; 
     font-family: 'Nosifer', cursive; 
     text-decoration: none; 
     font-size: 20px; 
     color:red; 

     } 

    nav a:hover { 

     background-color: #D10000; 
     color: black; 
     padding-top: 12px; 
     padding-bottom: 10px; 


     } 


     .active{ 


      background-color: #D10000; 
      color: black; 
      padding-top: 12px; 
      padding-bottom: 10px; 


     } 

     body{ 
      background-color: #ffe6e6; 
     } 


    <nav> 
    <a href="#" class="active">HOME</a> 
    <a href="#">COMPUTER PARTS</a> 
    <a href="#">BUILD A COMPUTER</a> 
    <a href="#">MEDIA</a> 
    <a href="#">GO TO MAIN</a> 
    </nav> 

任何人都可以請幫助我。我嘗試使用align =「center」,text-align:center; 我嘗試了很多其他的東西,但由於某種原因,它並沒有將我的導航欄放在我的網頁中心。另外,當我嘗試在導航欄底部顯示圖像並居中時,圖像不居中。爲什麼我不能居中導航欄?

+0

你想中心什麼元素? –

回答

5

沒有看到您的標記,很難說。但可能由於float: leftnav a。從nav a中刪除,並添加display: inline-block;

+0

謝謝!有用! –

+0

@MiguelWightman真棒不客氣。如果你覺得它解決了你的問題,讓其他人知道它已經被解決了,那麼一定要注意答案,如果它幫助並接受它(答案中的複選標記) –

+0

@MiguelWightman不確定你是否注意到,但是人們仍在回答你的問題,因爲你沒有接受答案。如果問題得到解決,一定要接受答案,以免人們認爲它是開放的,並繼續爲您提供解決方案。 –

0

你甚至沒有什麼定位?

使用屬性top: valueleft: valueright: valuebottom: value來定位你的導航欄。您可以將這些屬性與transform: translate(X, Y)結合使用。

text-align只會對齊文本在一個元素內,如果確實有文本。如果沒有任何文字,它什麼都不會做。

0

您需要刪除「浮動:左」從「資產淨值」和選擇下列方式重新編寫代碼:

nav a { 
    display: inline-block; 
    font-weight: bold; 
    color: #000; 
    margin: 0 5px; 
    background-color: #131313; 
    font-family: 'Nosifer', cursive; 
    text-decoration: none; 
    font-size: 20px; 
    color:red; 

}