'How to align the icons on the right to the center of the navigation bar?

I want to align the social media icon on the right in the center of the navigation bar along with the navigation link and logo. I'm trying to do something like this navigation bar

Link to code

htmlcssflexbox


Solution 1:[1]

You can create a wide div that is centered, create a div containing the icons, put it in the centerd div and then use in css float: right;

Solution 2:[2]

you can use something like that:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .header {
        width: 100%;
        height: 60px;
        background-color: black;
        display: flex;
        justify-content: center;
    }
    .centered {
        width: 900px;
        height: 60px;
        background-color: red;
        display: flex;
        justify-content: center;
    }
    .text {
        width: 300px;
        height: 60px;
        background-color: yellow;
    }
    .logo {
        width: 200px;
        height: 60px;
        display: flex;
        flex-direction: row;
        position: absolute;
        left: calc(50% + 260px);
    }
    .logo div {
        height: 45px;
        width: 45px;
        border-radius: 7px;
        background-color: yellow;
        position: relative;
        margin-top: 7px;
        margin-left: 14px;
    }
</style>

<div class="header">
    <div class="centered">
        <div class="text">
        </div>
        <div class="logo">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

Solution 3:[3]

What you're trying to do is probably aligning your content to the vertical center. To do that set your navbar display to grid and set grid-template-column according to the structure of the content within your navbar and also place all your social icons within a div that's a direct child of the navbar.

And lastly on the div containing your social-icons, set the properties;

.social_box{
   display: flex;
   justify-self: center;
   align-content: space-around;
   justify-content: center;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 s3rgi0s
Solution 2 s3rgi0s
Solution 3 Delviszi

Related Questions