按钮对齐问题答案

【问题标题】：Issue with alignment of button按钮对齐问题
【发布时间】：2017-07-24 05:20:42
【问题描述】：

我的预订按钮对齐有问题。它应该以社交媒体按钮为中心并位于 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>

【问题讨论】：

标签： html css button alignment

【解决方案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;
    }

【讨论】：