How do I make my image sprites sit beside together?-CodePudding

I'm trying to make a footer with social media icons. However, I don't know how to make the icons sit beside each other. They're just in the side and vertically aligned (idek how to align it in the center). I want them icons in the icons in the center and side-by-side.

HTML :

<div >
    <div ><a href="#"></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div> 
</div>

CSS :

.fb {
        background: url('../images/sites.png') no-repeat -79px -109px;
        width: 302px;
        height: 302px;
    }

    .ig {
        background: url('../images/sites.png') no-repeat -459px -110px;
        width: 307px;
        height: 307px;
    }

    .yt {
        background: url('../images/sites.png') no-repeat -852px -115px;
        width: 299px;
        height: 299px;
    }

    .twt {
        background: url('../images/sites.png') no-repeat -1244px -114px;
        width: 295px;
        height: 293px;
    }

    .pin {
        background: url('../images/sites.png') no-repeat -1632px -112px;
        width: 293px;
        height: 293px;
    }

CodePudding user response：

You could do something like this. Flexboxes are really handy.


<html>
    <style>
    .footer {
        display: flex;
        gap: 20px; /* Here you can specify a gap between the child elements*/
    }

    .footer img {
        width: 30px;
    }
    </style>
    <body>
        <div >
            <img src="../images/someicon1.png"></img>
            <img src="../images/someicon2.png"></img>
            <img src="../images/someicon3.png"></img>
            <img src="../images/someicon4.png"></img>
            <img src="../images/someicon5.png"></img>
        <div>
    </body>
</html>