Search code examples
htmlcssbuttonalignment

Issue with alignment of button


I am having an issue with the alignment of my pre-order button. It should be centered with the social media buttons and to the right of the Youtube button but for some reason it is not. I would also like to make the button completely flat and the background-color, white.

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

Solution

  • hope I help with this:

        .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;
        }