[FIXED] When I put an image the text at right go at the bootom

Issue

it is making me crazy. I have a nav bar where there are three div.

Each div has some text that is aligned at center both vertically and horizontally.

When I put an image ( is a svg icon of a zoom lens ) before the "search" text, it moves my text "search" at the bottom.

This is the code:

HTML

<nav>
        <div id="leftside">
            <img src="img/zoom-lens.png" alt="search">
            search
        </div>
        <div id="middle">
            Arkadomundo
        </div>
        <div id="rightside">
            Sign Up
        </div>
</nav>

CSS

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
}

nav {
    height: 70px;
    width: 100%;
    background-color: #241F1C;
    font-family: 'Press Start 2P', cursive;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

#leftside {
    flex-grow: 1;
    text-align: left;
    margin-left: 10px;
}

#leftside img {
    height: 50px;
}

#middle{
    flex-grow: 2;
    text-align: center;
}


#rightside {
    flex-grow: 1;
    text-align: right;
    margin-right: 10px;
}

I guess it's an easy problem for you but honestly I cant find the why it happens

Solution

Your #leftside div won't automatically align its contents. Add display: flex; align-items: center; to it too, and everything will be centered vertically:

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
  margin: 0;
  padding: 0;
}

nav {
  height: 70px;
  width: 100%;
  background-color: #241F1C;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}

#leftside {
  flex-grow: 1;
  text-align: left;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

#leftside img {
  height: 50px;
}

#middle {
  flex-grow: 2;
  text-align: center;
}

#rightside {
  flex-grow: 1;
  text-align: right;
  margin-right: 10px;
}

<nav>
  <div id="leftside">
    <img src="https://picsum.photos/80/120" alt="image"> search
  </div>
  <div id="middle">
    Arkadomundo
  </div>
  <div id="rightside">
    Sign Up
  </div>
</nav>

Answered By - Johannes

Answer Checked By - David Marino (PHPFixing Volunteer)