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?
This will help you
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?
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.
You may cancel your
vertical-align: middle; in both
#logo-text and just add in css
and thats it.