How to make icons align in vertical center with the navigation links?-CodePudding

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. the navigation links are made using ul,li elements. and the social icons are in the div. I'm not getting should I use grid or flexbox or inline-block to get the desired UI.This is what I'm trying to do desired UI

.Navigation {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 24px;
  background-color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: 1px solid #2c2c2c;
  
}

.Navigation li {
  list-style: none;
  display: inline-block;
  margin-right: 0;
  color: #ffffff;
  vertical-align: middle;
}
a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
}

.social img {
  width: 24px;
  height: 24px;
}

.social a {
  text-decoration: none;
  margin: 0 16px;
}
.icon {
  display: inline-block;
}

.social_center {
  display: inline-block;
  float: right;
  margin: 0 20px;
}

<div >
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Collab</a></li>
        <li>
          <img
            
            src="https://cdn.glitch.global/28f44676-40fa-4a71-b1c4-0fcb52be7382/Logo.png?v=1649644172153"
            width="175px"
            height="105px"
          />
        </li>

        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
      
     
         <div >
 
      <div >
       <div >
        <a href="https://www.youtube.com/channel/UC3DkFux8Iv-aYnTRWzwaiBA">
          <img
            src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame.png?v=1650775255106"
          />
        </a>
     </div>

      <div >
        <a href="https://www.instagram.com/petermckinnon/">
          <img
            src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame-1.png?v=1650775235821"
          />
        </a>
      </div>

      <div >
        <a href="https://www.facebook.com/petermckinnonphoto">
          <img
            src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame-2.png?v=1650775245589"
          />
        </a>
      </div>
      <div >
        <a href="https://twitter.com/petermckinnon">
          <img
            src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame-3.png?v=1650775250222"
          />
        </a>
      </div>
        </div>
             </div>
    </div>

CodePudding user response：

Try this:

.Navigation {
    display: flex;
    align-items: center;
}

If it isn't what you want - please let me know

CodePudding user response：

For positioning purposes it's easier to just use Flex.

Try putting a parent element that represents the whole navbar, add display: flex; justify-content: space-between; align-items: center;

Inside of it, there should be two Major divs, one for the nav links and the logo and other containing the social icons.

In both of these divs, add display: flex; justify-content: center; align-items: center;

For the div containing the nav links and logo, also add flex: 1; so it will take all the remaining free space and the content inside of it should be positioned in the center of the navbar.

CodePudding user response：

You can use display flex to your navigation main container, ul and also to the social icons container.

The idea is to make the main container flex its child to a row, the same with social icons container. You can check sample below:

.navigation {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #2c2c2c;
}

.navigation ul {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navigation li {
  list-style: none;
  color: #ffffff;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}

.social {
  display: flex;
  align-items: center;
}

.social img {
  width: 24px;
  height: 24px;
  margin: 0;
  vertical-align: middle;
}

.social a {
  text-decoration: none;
  margin: 0 16px;
}

.icon {
  display: inline-block;
}

<div >
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Collab</a></li>
      <li>
        <img
          
          src="https://cdn.glitch.global/28f44676-40fa-4a71-b1c4-0fcb52be7382/Logo.png?v=1649644172153"
          width="175px"
          height="105px"
        />
      </li>

      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>


  <div >

    <div >
     <div >
      <a href="https://www.youtube.com/channel/UC3DkFux8Iv-aYnTRWzwaiBA">
        <img
          src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame.png?v=1650775255106"
        />
      </a>
   </div>

    <div >
      <a href="https://www.instagram.com/petermckinnon/">
        <img
          src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame-1.png?v=1650775235821"
        />
      </a>
    </div>

    <div >
      <a href="https://www.facebook.com/petermckinnonphoto">
        <img
          src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame-2.png?v=1650775245589"
        />
      </a>
    </div>
    <div >
      <a href="https://twitter.com/petermckinnon">
        <img
          src="https://cdn.glitch.global/ea44df9f-5322-47c9-83ba-4f453113a115/Frame-3.png?v=1650775250222"
        />
      </a>
    </div>
      </div>
           </div>
  </div>