导航菜单栏中图标位置及其标题的位置问题

我在创建的导航菜单栏中设置了我的社交媒体图标的格式问题。我发现的是，因为我已将标题置于导航菜单栏中，它覆盖了菜单栏的整个中心，并且不允许将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

它只将图标居中，我希望它们位于菜单的右侧，但也在菜单内，现在它们不是。 –

你想如何显示社交媒体链接？ –

我在上面的评论中写到了 –

导航菜单栏中图标位置及其标题的位置问题

回答

相关问题