ナビゲーションメニューバー内のアイコンの配置とそのヘッダーの配置に関する問題

作成したナビゲーションメニューバーにソーシャルメディアアイコンの書式設定に問題があります。私が見つけたのは、ナビゲーションメニューバーのヘッダーを中央に配置しているため、メニューバー全体の中央を覆い、FacebookアイコンまたはInstagramアイコンをバーの内側に配置して中央に配置することができないということです。ここでナビゲーションメニューバー内のアイコンの配置とそのヘッダーの配置に関する問題

<head> 
    <meta charset="UTF-8"> 
    <link rel = "icon" href="LogoBlack.PNG" type="image/SVG"> 
    <style> 
     body {margin:0;} 
     .Header { 
      position: fixed; 

      width: 100%; 
      background-color: #000000; 
      height: 70px; 
     } 

    </style> 
</head> 

<body> 

<div class="Header" id="myHeader"> 
    <a class = "headerLogo"> 
     <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large; 
     text-align: center;">Header</h1></a> 
     <style> 
      a{text-decoration: none} 
     </style> 

    </a> 

    <a class = "Facebook" style = "padding-left: 1000px;"> 
     <img src = "facebook-3-xxl.png"> 
    </a> 
    <a class = "Instagram" style = "padding-left: 30px"> 
     <img src = "instagram-32.png"> 
    </a> 
</div> 
</body> 
<body>

は、それはまだあなたがアイコンではなく中心に、親に text-align:center;を使用したい場合は、メニューバー

<meta charset="UTF-8"> 
    <link rel = "icon" href="LogoBlack.PNG" type="image/SVG"> 
    <style> 
     body {margin:0;} 
     .Header { 
      position: fixed; 
      width: 100%; 
      background-color: #000000; 
      text-align: center; 
      margin-bottom: 50%; 
     } 

    </style> 
</head> 

<body> 

<div class="Header" id="myHeader"> 
    <a class = "headerLogo"> 
     <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large; 
     text-align: center;">Header</h1></a> 
     <style> 
      a{text-decoration: none} 
     </style> 

    </a> 

    <a class = "Facebook" style = "margin-left: 50%; margin-bottom: 500px"> 
     <img src = "facebook-3-xxl.png"> 
    </a> 
    <a class = "Instagram" style = "margin-left: 2%"> 
     <img src = "instagram-32.png"> 
    </a> 
</div> 
</body> 
<body>

出典

2017-02-27 Noah Tanenholtz

私が発見しています何それはヘッダであるので、それはそれが整列された場合のために全体のスペースを取っているということですので、私は何をすべきかわかりません。 –

の中央に整列されていないアイコンで私の更新されたコード扱っていますさ要素（これは.Header）をパディングと整列させるよりも優先されます。

<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel = "icon" href="LogoBlack.PNG" type="image/SVG"> 
 
    <style> 
 
     body {margin:0;} 
 
     .Header { 
 
      position: fixed; 
 

 
      width: 100%; 
 
      height:70px; 
 
      background-color: #000000; 
 
      text-align:right; 
 
     } 
 
     .socialmedia { 
 
      position:fixed; 
 
      right:0; 
 
      top:35px; 
 
      transform:translate(0,-50%); 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 

 
<div class="Header" id="myHeader"> 
 
    <a class = "headerLogo"> 
 
     <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large; 
 
     text-align: center;">Header</h1></a> 
 
     <style> 
 
      a{text-decoration: none} 
 
     </style> 
 

 
    </a> 
 
    <div class="socialmedia"> 
 
    <a class = "Facebook"> 
 
     <img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"> 
 
    </a> 
 
    <a class = "Instagram"> 
 
     <img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"> 
 
    </a> 
 
    </div> 
 
</div> 
 
</body> 
 
<body>

出典

2017-02-27 22:13:55

これはアイコンの中央にのみ配置されています。メニューの右側に表示するだけでなく、メニューの内側にも表示するようにしました。 –

どのようにソーシャルメディアのリンクを表示しますか？ –

私は上記のコメントにそれを書いた –

ナビゲーションメニューバー内のアイコンの配置とそのヘッダーの配置に関する問題

答えて

関連する問題