CSS applying to wrong block

HTML-CSS
1

How come when I change line 18 in the CSS file " vertical-align: middle;" it doesn’t change the alignment of the logo which I referenced via the id “logo-img” but instead changes “logo-text”.

Since that block is for “logo-img”, when I felt that if I change it to “vertical-align: bottom”, the logo img should move, not the logo text which is a different id. What is going on here?

2

This will help you

3

Thanks for sending this over! I’m not sure I fully understand it properly, but is it because the image is within another larger div/section and since its “inline” it applies to everything in that section?

4

Look at these points mentioned in the article:

Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be

and this point

The browser does the best job it can centering the pixel height of the text with the pixel height of the image

So when you apply the vertical-align middle to the image it positions the text too, this property is mostly used for centering icons with any text beside.

5

You may cancel your vertical-align: middle; in both #logo-img and #logo-text and just add in css

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

and thats it.