導航菜單欄中圖標位置及其標題的位置問題

我在創建的導航菜單欄中設置了我的社交媒體圖標的格式問題。我發現的是，因爲我已將標題置於導航菜單欄中，它覆蓋了菜單欄的整個中心，並且不允許將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

它只將圖標居中，我希望它們位於菜單的右側，但也在菜單內，現在它們不是。 –

你想如何顯示社交媒體鏈接？ –

我在上面的評論中寫到了 –

導航菜單欄中圖標位置及其標題的位置問題

回答

相關問題