I am here to ask you about one CSS question. How can I align these elements like they're shown on the picture? I will provide also HTML code.

https://i.imgur.com/ByO5bIC.png

<header>
<div class="header-main">
  <a href="about-us.html">ABOUT US</a>
  <a id="toplica" href="index.html">TOPLICA</a>
  <a href="contact.html">CONTACT</a>
</div>
<div class="social-media">
  <span class="iconify" data-icon="ant-design:instagram-filled" style="color: #ba4a1d;"></span>
  <span class="iconify" data-icon="ant-design:facebook-filled" style="color: #ba4a1d;"></span>
  <span class="iconify" data-icon="fluent:location-28-filled" style="color: #ba4a1d;"></span>
</div>
</header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Thank you.

CodePudding user response：

Try this:

<header class="header-flex">
<div>
  /* keep it empty */
</div>
<div class="header-main">
  <a href="about-us.html">ABOUT US</a>
  <a id="toplica" href="index.html">TOPLICA</a>
  <a href="contact.html">CONTACT</a>
</div>
<div class="social-media">
  <span class="iconify" data-icon="ant-design:instagram-filled" style="color: #ba4a1d;"></span>
  <span class="iconify" data-icon="ant-design:facebook-filled" style="color: #ba4a1d;"></span>
  <span class="iconify" data-icon="fluent:location-28-filled" style="color: #ba4a1d;"></span>
</div>
</header>

and then in your header-flex:

.header-flex {
  display:flex;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

and in your header-main:

.header-main {
  display:inline-block;
  margin: 0 15vw;
  /* replace 15vw with whatever margin you need to push the social media icons to the edge */
}

CodePudding user response：

You can use the flex property in each parent container and give them properties like:

.PARENT_CONTAINER_NAME{
    display: flex;
    justify-content: center;  // for horizontal alignment
    align-items: center;      // for vertical alignment
}

Make sure to give height and width to the parent container and experiment with a few other values of justify-content to get your desired output.

CodePudding user response：

you can just put .socail-media within the .header-main like the following code

   <style>

        .header-main{
            display: flex;
            justify-content: center;
            align-items: center
        }
a{
margin: 0 5px;}

        .social-media{
            display: flex;
            justify-content: end;
        }
    </style>


    <header>
        <div class="header-main">
          <a href="about-us.html">ABOUT US</a>
          <a id="toplica" href="index.html">TOPLICA</a>
          <a href="contact.html">CONTACT</a>
        </div>
        <div class="social-media">
          <span class="iconify" data-icon="ant-design:instagram-filled" style="color: #ba4a1d;"></span>
          <span class="iconify" data-icon="ant-design:facebook-filled" style="color: #ba4a1d;"></span>
          <span class="iconify" data-icon="fluent:location-28-filled" style="color: #ba4a1d;"></span>
        </div>
        
    </header>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

for space among tags use margin