Question

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

这是我的更新代码，仍处理未与菜单栏中心对齐的图标

<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>

Answer 1

如果您希望图标居中，请在其父元素（text-align:center;）上使用.Header，而不是将其与填充对齐。

＆＃13;

<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>

＆＃13;

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

1 个答案: