I want to align icons inside this nav-bar. I tried to align them with flexbox, vertical align, etc. I tried everything, but it doesn't seem to work. Should I rewrite the code inside a list?

The current Code looks like this:

.nav-bar {
  display: flex;
  flex-direction: column;
  position: relative;
}

<div class="container">
  <div class="nav-bar">
    <img src="assets/Ics/....svg"><a routerLink="..">Car</a>
    <img src="assets/Ics/...svg"><a routerLink="..">Make</a>
    <img src="assets/Ics/...svg"><a routerLink="..">About</a>
  </div>
</div>

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

CodePudding user response：

You need to keep your img and anchor tag in flex container with align-items property

<div class="nav-bar">
  <div><img src="assets/Ics/....svg" ><a routerLink="..">Car</a></div>
  <div><img src="assets/Ics/...svg"><a routerLink="..">Make</a></div>
  <div><img src="assets/Ics/...svg"><a routerLink="..">About</a></div>
</div>

.nav-bar div{
  display:flex;
  align-items: center;
}

CodePudding user response：

Yes, you can use li tag like below

<div class="container">
    <div class="nav-bar">
        <ul style="list-style: none;">
            <li><img src="assets/Ics/....svg" ><a routerLink="..">Car</a></li>
            <li><img src="assets/Ics/...svg"><a routerLink="..">Make</a></li>
        </ul>
    </div>
 </div>