Question

我在预订按钮的对齐方面遇到了问题。它应该以社交媒体按钮为中心，并在Youtube按钮的右侧，但由于某种原因，它不是。我还想让按钮完全平整，背景颜色为白色。

<head>
    <meta charset="UTF-8">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <style>
        body {margin:0;}
        .Header {
            position: fixed;
            width: 100%;
            height:70px;
            background-color: black;
            text-align:right;
        }

        .socialmedia {
            position:fixed;
            right:150px;
            top:35px;
            transform:translate(0,-50%);
        }

        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;

        }

    </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>
        <a class = "Youtube">
            <img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>
</body>

Answer 1

希望我对此有所帮助：

    .socialmedia {
        position:fixed;
        right:150px;
        top:35px;
        transform:translate(0,-50%);
        display: flex; /* add this */
        align-items: center; /* add this */
    }

    .preorder button {
        background-color: white;
        border: 0;
    }

对齐按钮的问题

1 个答案: