navbarと画像センタリングの問題

学校プロジェクトの一環として、最初のウェブページを作成しようとしています。私はしかし、私はトップバーにロゴを配置し、それを中心に私のナビゲーションバーがページの下に移動するこの問題に立ち往生しています。誰かが助けることができるのだろうか？navbarと画像センタリングの問題

JSフィドル：ここ

https://jsfiddle.net/3k65c20u/は私のコードです：

#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

を.navigation-bar ulルールで削除してください。 ulで

出典

2017-02-15 13:40:12 Anfuca

これは素晴らしい作品削除、ありがとう！ – ECheibaa

変更CSS、padding:210px;

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

出典

2017-02-15 13:50:40

navbarと画像センタリングの問題

答えて

関連する問題