'When I put an image the text at right go at the bootom

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

htmlcssimageflexboxvertical-alignment


Solution 1:[1]

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>

Solution 2:[2]

Try adding display: inline-block; on your CSS for #leftside img

#leftside img {
    height: 50px;
    display: inline-block;
}

Solution 3:[3]

for fixing this, make #left-side flex container and set align-items property to center because #left-side child's get centered. Or copy this CSS codes:

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

Solution 4:[4]

it s working if I put display flex and align items also on #leftside !

Thank you !

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Johannes
Solution 2 Cutey from Cute Code
Solution 3 Magical Briefcase
Solution 4 ChristianDP

Related Questions