如何将右侧的图标对齐到导航栏的中心？

Question

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

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

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

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